I'm playing around with the <canvas> element, drawing lines and such.
I've noticed that my diagonal lines are antialiased. I'd prefer the jaggy look for what I'm doing - is there any way of turning this feature off?
+3
A:
Currently you can't.
Related problem was discussed on the WHAWG mailing list, and whether this should be possible is still an open issue and might be added in the future.
You can write your own line-drawing function with help of getImageData and putImageData (and use lineTo as a fallback, because pixel data isn't exposed by all implementations).
porneL
2008-10-12 14:52:11
I wonder about the performance of a javascript line algorithm.. Might give Bresenham's a go at some point.
Blorgbeard
2008-10-14 19:32:16
Browser vendors are touting new super-fast JS engines lately, so finally there would be a good use for it.
porneL
2008-10-14 22:33:14
+2
A:
Draw your 1-pixel lines on coordinates like ctx.lineTo(10.5, 10.5). Drawing a one-pixel line over the point (10, 10) means, that this 1 pixel at that position reaches from 9.5 to 10.5 which results in two lines that get drawn on the canvas.
A nice trick to not always need to add the 0.5 to the actual coordinate you want to draw over if you've got a lot of one-pixel lines, is to ctx.translate(0.5, 0.5) your whole canvas at the beginning.
allan
2010-07-19 09:34:04