'Split canvas into 100 pieces in Javascript
So, I want to split canvas into 100 squares 50x50px and I want to do it with as little code as possible. I started making it with for loops but I would then need 10 for loops. I want to know is there a faster way with one for loop or so 
and here is the code
let canvas = document.querySelector("canvas");
canvas.width = 500;
canvas.height = 500;
let c = canvas.getContext("2d");
let x = 0;
let y = 0;
for(let i = 0; i < 10; i++)
{
if (i==0)
{
c.beginPath();
c.moveTo(0, 50);
c.lineTo(50, 50);
c.lineTo(50, 0);
c.stroke();
}
x += 50;
c.beginPath();
c.moveTo(x, 50);
c.lineTo(x + 50, 50);
c.lineTo(x + 50, 0);
c.stroke();
}
x = 0;
y = 0;
for(let i = 0; i < 10; i++)
{
if (i==0)
{
c.beginPath();
c.moveTo(0, 100);
c.lineTo(50, 100);
c.lineTo(50, 50);
c.stroke();
}
x += 50;
c.beginPath();
c.moveTo(x, 100);
c.lineTo(x + 50, 100);
c.lineTo(x + 50, 0);
c.stroke();
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
