# The problem is when drawing to a canvas (HTML5)

There is a problem — draw on the canvas grid of 18 cells wide and 4 cells tall.

Write the code to do 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();
}
``````

In the end, hard drawn grid with 14 squares wide. Ie, more than 14 cells are not draws never. If less than 14 put — draws exactly the number of cells that I have. Why?
October 8th 19 at 03:57
1 answer
October 8th 19 at 03:59
Solution
Try this
``````canvas.width = canvasWidth;
canvas.height = canvasHeight;
``````
`width` and `height` are attributes of the tag `canvas`. If you apply styles with different width and height, it is possible to obtain effects stretching/compression. - giles_Windler commented on October 8th 19 at 04:02
Wow, that helped O_o Thank you! - Jessik commented on October 8th 19 at 04:05
And here is an excerpt from the specs: "The width attribute defaults to 300, and the height attribute defaults to 150". - giles_Windler commented on October 8th 19 at 04:08

Find more questions by tags CanvasHTMLJavaScript