Размеры сетки при нанесении сетки на холст

Question

См. Следующий план: Растровый холст

Размер холста составляет 120 пикселей в ширину и 80 пикселей в высоту. Этот код dr aws вертикальные линии:

for (var x = 0; x <= this.CanvasWidth*2.5; x += gridSize*1.25) {
    ctx.moveTo(x + p, p);
    ctx.lineTo(x + p, this.CanvasHeight*2.5 + p);
}

Как вы заметили, мне пришлось корректировать ширину и высоту холста в 2,5 раза, а размер сетки - в 1,25. p для отступа и имеет значение 0. Это не имеет смысла для меня. Поскольку я хочу сетки размером 10x10 пикселей, я подумал, что приращение в 10 (var gridSize) должно сделать это. То же самое относится к ширине и высоте холста, если я использую свойства CanvasWidth и CanvasHeight, он будет охватывать только часть холста.

Может кто-нибудь сказать мне, что происходит? Thx!

Answer 1

Похоже, что комбинация CSS вызывает некоторые проблемы в вашем коде, здесь та же самая сетка № CSS

canvas = document.getElementById("grid")
canvas.width = 120;
canvas.height = 80;
ctx = canvas.getContext('2d')

var gridSize = 20;

for (var x = 0; x <= canvas.width; x += gridSize) {
  ctx.moveTo(x, 0);
  ctx.lineTo(x, canvas.height);
}

for (var y = 0; y <= canvas.height; y += gridSize) {
  ctx.moveTo(0, y);
  ctx.lineTo(canvas.width, y);
}

ctx.strokeStyle = "black";
ctx.stroke();

<canvas id="grid"></canvas>

Как видите, у меня нет CSS, и в циклы for не добавлен коэффициент.
Но важно отметить, что я делаю установить размер холста:

canvas.width = 120;
canvas.height = 80;