subpixel drawing in Canvas

Difference of using subpixel drawing with normal coordinates.

by dbugger

HTML

<canvas id="canvas1" width="500" height="300"></canvas>
<canvas id="canvas2" width="500" height="300"></canvas>

CSS

canvas{
    display: block;
}

JavaScript

var c1 = document.getElementById("canvas1").getContext("2d");
var c2 = document.getElementById("canvas2").getContext("2d");

function drawGrid(c, x){

    for (var i = x; i < 500; i += 10){
        c.moveTo(i, 0);
        c.lineTo(i, 300);
    }
    
    c.strokeStyle = "Black";
    c.stroke();
}

drawGrid(c1, 5);
drawGrid(c2, 5.5);