html5のCanvasを使ってアニメーションを作る5

Canvas に格子線を引く

今回はアニメーションではないですが、Canvas に格子線を引く方法の紹介です。
コードは以下です。

<!doctype html>
<html lang="ja">
    <head>
        <title>Grid</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            #mycanvas{
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="1000" height="600"></canvas>
        
        <script>
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');
            var stepX = 100; //グリッドのX座標の間隔
            var stepY = 100; //グリッドのY座標の間隔
            
            //グリッドを描く関数
            function drawGrid(){
                
                for(var i = stepX + 0.5; i<canvas.width; i += stepX){
                    ctx.beginPath();
                    ctx.moveTo(i, 0);
                    ctx.lineTo(i, canvas.height);
                    ctx.stroke();
                }
                
                for(var i = stepY + 0.5; i<canvas.width; i += stepY){
                    ctx.beginPath();
                    ctx.moveTo(0, i);
                    ctx.lineTo(canvas.width, i);
                    ctx.stroke();
                }
            }
            
            //実行
            drawGrid();
        </script>
    </body>
</html>

縦線と横線の間隔は、stepX と stepY で設定しています。
drawGrid の中では、for 分で縦線と横線を繰り返し描いています。
ここで、var i = stepX + 0.5; のように 0.5 を足しているのは、整数の座標に線を引いてしまうと、線の幅が 2 ピクセルになってしまうためです。

整数の2の座標に線を引いた場合、2 を中心に 0.5 ピクセル分左右に幅がとられるため、1 から 3 までの 2 ピクセルが使われてしまうことになる
grid1

1.5 の座標に線を引いた場合、1.5 を中心に左右に0.5ピクセル幅がとられるため、線は1ピクセル幅で収まる
grid2