HTML5 Canvas – Crisp lines every time

basic-context-translation.js

context.translate(0.5, 0.5);

both-fixed.js

var ctx = document.getElementById('canvas').getContext('2d');

for (var i = 0; i < 10; i++) {
        var iStrokeWidth = 1 + i;
        var iTranslate = (iStrokeWidth % 2) / 2;
        ctx.translate(iTranslate, 0);

        ctx.lineWidth = iStrokeWidth;
        ctx.beginPath();
        ctx.moveTo(5+i*14, 5);
        ctx.lineTo(5+i*14, 140);
        ctx.stroke();
        
        // reset the translation back to zero
        ctx.translate(-iTranslate, 0);
}

canvas.html

<canvas id="canvas" width="150" height="150"></canvas>

context-translation-calculation.cs

var iStrokeWidth = 1;
var iTranslate = (iStrokeWidth % 2) / 2;
context.translate(iTranslate, iTranslate);

vertical-fixed.js

var ctx = document.getElementById('canvas').getContext('2d');

for (var i = 0; i < 10; i++) {
        var iStrokeWidth = 1 + i;
        var iTranslate = (iStrokeWidth % 2) / 2;
        ctx.translate(iTranslate, iTranslate);

        ctx.lineWidth = iStrokeWidth;
        ctx.beginPath();
        ctx.moveTo(5+i*14, 5);
        ctx.lineTo(5+i*14, 140);
        ctx.stroke();
        
        // reset the translation back to zero
        ctx.translate(-iTranslate, -iTranslate);
}