JSFiddle - React, Tailwind, and code Playground

by heldersepu

JavaScript

let canvas = document.createElement("canvas");
canvas.width = canvas.height = 200;
ctx = canvas.getContext("2d");

let triangleWidth = 20;
let offsetX = 50;
let offsetY = 50;

let y0 = 1;
let y1 = triangleWidth;
let y2 = triangleWidth / 2;

function draw() {
    for (let y = 0; y < canvas.height; y++) {
      x0 = triangleWidth;
      x1 = triangleWidth;
      x2 = 0;            

        for (let x = 0; x < canvas.width; x += offsetX) {
            ctx.beginPath();
          	ctx.arc(x0, y0, 2, 0, 2 * Math.PI, false);
            ctx.fill();
						ctx.beginPath();
            ctx.arc(x1, y1, 2, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(x2, y2, 2, 0, 2 * Math.PI, false);
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(x0, y0);
            ctx.lineTo(x2, y2);
            ctx.moveTo(x2, y2);
            ctx.lineTo(x1, y1);
            ctx.stroke();
            
            x0 += offsetX;
            x1 += offsetX;
            x2 += offsetX;
        }
        y0 += offsetY;
        y1 += offsetY;
        y2 += offsetY;
    }
}

draw();

document.body.appendChild(canvas);