JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var cRenderContext = can.getContext('2d');

var iPosX = 10;
var iPosY = 10;
var iTileWidthIncrement = 10.5;
var iTileHeightIncrement= 10.5;
var iTileWidth = 21;

for (var i = 0; i < 2; i++) {
    for (var j = 0; j < 10; j++) {
    cRenderContext.beginPath();
    
    cRenderContext.moveTo(iPosX, iPosY);
    cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY - iTileHeightIncrement);
    cRenderContext.lineTo(iPosX + iTileWidth, iPosY);
    cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY + iTileHeightIncrement);
    cRenderContext.lineTo(iPosX, iPosY);
    
    cRenderContext.fillStyle = "rgba(1, 0, 1, 1)";
    cRenderContext.fill();
    cRenderContext.closePath();
    iPosX += 20;
    }
    iPosX = 20;
    iPosY += 10;
}