HTML canvas line color is not accurate

Question

Can someone please explain why does canvas does not obey color choice and how to fix it so it draw in "true" colors? I know canvas is using 0.5 pixel coordinates, so I've tried draw using 0.5 increments, but it still draw with funky colors (using ColorCop to zoom in and check colors per pixel:

Here is a little snippet that supposed to draw blue lines, 2 lines next to each other and third line 1 pixel away, the result is only first line has true blue everything else is purple or worse, including first/last pixel of first line:

 const canvas = document.getElementById("line"), ctx = canvas.getContext("2d"); canvas.width = canvas.height = 100; ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.imageSmoothingEnabled = false; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

 <canvas id="line"></canvas>

My monitor resolution is 2560x1440 with 100% scaling. No system/browser/software or any kind of zoom/scale is used. If I draw a pixel in MS Paint, I see one pixel on the monitor no antialiasing, no artifacts.

Answer 1

do this, your canvas will show high resolution pixels

1. set canvas width and height to (desired width and height) * devicePixelRatio * 2

2. reassign it using css style property to what width and height you want

3. scale context 2, 2

   By default, one unit on the canvas is exactly one pixel. A scaling transformation modifies this behavior. For instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. Similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size.

 const width = height = 100 const pixelRatio = window.devicePixelRatio * 2; const canvas = document.getElementById('line'); canvas.width = width * pixelRatio; canvas.height = height * pixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const ctx = canvas.getContext("2d"); ctx.scale(pixelRatio, pixelRatio); ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

 <canvas id="line"></canvas>

Answer 2

You are probably on a high resolution monitor. CSS will scale your canvas and will create antialiasing.

To overcome this, you can multiply the size of your canvas by the pixel ratio of your monitor and then scale down to the expected size using CSS:

 const canvas = document.getElementById("line"), ctx = canvas.getContext("2d"), dPR = window.devicePixelRatio; // multiply by dPR canvas.width = canvas.height = 100 * dPR; // downscale through CSS canvas.style.width = canvas.style.height = "100px"; ctx.scale(dPR, dPR); ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.imageSmoothingEnabled = false; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

 <canvas id="line"></canvas>