A Pen by younjisu.

canvas_crisp_lines.markdown

canvas_crisp_lines : A Pen by younjisu

A Pen by younjisu on CodePen.

License.

index.html

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

script.js

//orignal code
//https://developer.mozilla.org/samples/canvas-tutorial/4_5_canvas_linewidth.html

(function(){
        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();
          
        ctx.translate(-iTranslate, 0);
        }
})();