キャンバスJavascript：gridDraw（ctx）関数が動作しないChromeでエラーが発生しない

Question

これが動作しない理由を理解してください。 drawTest関数（概念証明のために表示）は機能しますが、drawGrid関数は機能しません。私は間違って何をしていますか？

'use strict'; 
window.onload = init; 
function init() { 
    let can = document.getElementById('canvas'); 
    let ctx = can.getContext('2d'); 
    drawTest(ctx); 
    drawGrid(ctx); 
} 

function drawTest(ctx) { 
    ctx.fillStyle = 'rgb(200, 0, 0)'; 
    ctx.fillRect(10, 10, 50, 50); 
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; 
    ctx.fillRect(30, 30, 50, 50); 
} 

function drawGrid(ctx, elSize = 10, width = .3, color = 'green') { 
    ctx.lineWidth = width; 
    ctx.stroke.style = color; 
    var lineX = ctx.width/elSize - 1; 
    var lineY = ctx.height/elSize - 1; 
    for (var i = 1; i <= lineX; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(elSize * i, 0); 
     ctx.lineTo(elSize * i, ctx.height); 
     ctx.stroke(); 
    } 
    for (var i = 1; i <= lineY; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(0, elSize * i); 
     ctx.lineTo(ctx.width, elSize * i); 
     ctx.stroke(); 
    } 
} 

Answer 1

コンテキストには幅を持っていないので、ctx.widthとctx.heightは未定義です。代わりに、ctx.canvas.widthとctx.canvas.heightを使用します。

function drawGrid(ctx, elSize = 10, width = .3, color = 'green') { 
    ctx.lineWidth = width; 
    ctx.stroke.style = color; 
    var lineX = ctx.canvas.width/elSize - 1; 
    var lineY = ctx.canvas.height/elSize - 1; 
    for (var i = 1; i <= lineX; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(elSize * i, 0); 
     ctx.lineTo(elSize * i, ctx.canvas.height); 
     ctx.stroke(); 
    } 
    for (var i = 1; i <= lineY; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(0, elSize * i); 
     ctx.lineTo(ctx.canvas.width, elSize * i); 
     ctx.stroke(); 
    } 
} 

fiddle