Проблема при рисовании на canvas (HTML5)

Question

[Руслан Левиев]

Есть задача — отрисовать на canvas «сетку» в 18 ячеек шириной и 4 ячейки высотой.

Пишу для этого код:

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();
}

В итоге упорно рисуется сетка с 14 ячейками в ширину.



Т.е. больше 14 ячеек не рисует никогда. Если меньше 14 ставишь — рисует ровно то кол-во ячеек, которое я указал. Почему так?

Comments

[skilledHS]

Что делает эта строчка?

var canvasWidth = cellWidth * (canvasCWidth + 6);
var canvasHeight = cellHeight * (canvasCHeight + 8);

[Руслан Левиев]

Берёт из настроек (переменные в самом начале скрипта) и вычисляем необходимую ширину/высоту canvas, которая получается путём умножения ширины/высоты одной ячейки на кол-во необходимых ячеек в ширину/высоту + отступы.

Answer 1

[avrelian]

Попробуйте так

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

Comments

[avrelian]

width и height — это атрибуты тэга canvas. Если применять стили с другой шириной и высотой, то можно получать эффекты растяжения/сжатия.

[Руслан Левиев]

Ого, помогло О_о Спасибо!

[avrelian]

А вот и выдержка из спеков: «The width attribute defaults to 300, and the height attribute defaults to 150».