'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 photo

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