Hello,
For some reason I’m unable to draw lines of exactly 1 pixel width (or height).
Even with g.PenWidth = 1, when I draw a line, I get a line of 2 pixels width (or height). This, on both Mac and Windows, and on all browsers I’ve tested (Firefox, Safari, Chrome, IE).
Yet the second line (so to speak) is not always the exact same color, like if there was some kind of antialiasing attempt on a vertical or horizontal line that does not need it.
And if I try to set a shadow this way: g.Shadow(1, &c000000, 1, 0), meaning a shadow size of 1 pixel, shifted by 1 pixel on the right, I get my shadow on the 3rd line (shifted by 2 pixels):
123
|||
1: My vertical line of supposedly 1 pixel width
2: Antialiased attempt or PenWidth 2 ?
3: Shadow which should be at position ‘2’, not ‘3’.
Am I alone experiencing this ?
Perhaps I’m doing (or not doing) something really stupid I don’t see ?
Cheers,
Guy.
Hmm, ok, just red that HTML 5 Canvas 2D Context use antialiasing/smoothing by default. There seems to be no way to disable it…
There is a trick by translating the canvas by 0.5 pixel while drawing but that implies the translate must be done inside the beginPath/Stroke block, so ExecuteJavascript wont help here : - /
Ok, I’ve found a workaround, which is specific to my case but perhaps will help some others if they reach the same situation.
First, my line was not drawn in the position ‘1’ but in position ‘2’. The smoothing, on vertical lines, seems to be always on the left (all browsers, both platforms).
123
|||
1: Antialiasing/Smoothing
2: My vertical line
3: Shadow
So the shadow was correct.
My workaround - which works as I am drawing on a transparent background - is simply to use ClearRect to erase the antialiased part.
I’m doing something like:
g.DrawLine(128,0,128,38)
g.ClearRect(127,0,1,38)
And I get a vertical line of exactly 1 pixel wide without smoothing.
Cheers,
Guy.