Line failure

Question

I am using EaselJS as an API for HTML5 canvas.

I noticed that the following code:

line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200); stage.addChild(line); 

... displays the following line:

I set the thickness to 1 - but the line is still fuzzy. If you zoom in on the picture, you will see that it actually takes 3 pixels. I seem to be reading a canvas somewhere drawing a dot between two pixels, so that both pixels will actually be colored. And you need to move when you draw a point half the width of the pixel so that it fits the entire pixel.

I need a sharp image for my applications, please report.

Answer 1

EaselJS is just an abstraction for the canvas API, which draws all the lines in the specified coordinates. The snapToPixel API is specifically designed for automatic rounding, but does not take into account the half-pixel problem that you are describing.

The practical approach is to put everything in a container and put the container on positive or negative (0,5,0,5) - which will regulate everything, and you can work in a normal coordinate space, and not compensate for all your calculations.