JS Canvas Lines

Drawing Lines Should be Easy, Right?

Drawing lines on the JavaScript canvas works analagous to drawing with a pen. You move to a point, then draw a line from that point to another point. But, by default drawing lines on the canvas produces blurry lines.

Both of the lines below should be red (#FF0000), but the vertical line is light-red or pink. The canvases in this demo are scaled up 3x (you can turn this off below), but the diagonal line looks both jagged and blurry.

        ctx.moveTo(10, 0);
        ctx.lineTo(10, 90);
        ctx.moveTo(20, 0);
        ctx.lineTo(70, 50);
  • Canvases are scaled 4x.