Issue when drawing on canvas (HTML5)

Question

JavaScript

There is a task - to draw a “grid” on canvas 18 cells wide and 4 cells high.

I write code for this:

var cellWidth = 20;
var cellHeight = 20;

var canvasCWidth = 18;
var canvasCHeight = 4;

var canvasContainerId = 'c';

window.onload = function draw()
{
  var canvasWidth = cellWidth * (canvasCWidth + 6);
  var canvasHeight = cellHeight * (canvasCHeight + 8);
  var canvas = document.getElementById(canvasContainerId);
  
  canvas.style.width = canvasWidth + 'px';
  canvas.style.height = canvasHeight + 'px';
  
  var ctx = canvas.getContext('2d');
  
  drawBG(ctx);
  
}

function drawBG(ctx)
{
  ctx.beginPath();
  
  for (i = 1; i <= canvasCWidth; i++)
  {
    for (j = 1; j <= canvasCHeight; j++)
    {
      ctx.strokeRect(cellWidth * i, cellHeight * j, cellWidth, cellHeight);
    }
  }
  
  ctx.closePath();
}

As a result, a grid with 14 cells wide is persistently drawn.



Those. never draws more than 14 cells. If you set less than 14, it draws exactly the number of cells that I specified. Why is that?

Answer 1

Try like this

canvas.width = canvasWidth;
canvas.height = canvasHeight;