JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<canvas id='surface' height='600' width='600' />

CSS

#surface {
    width: 600px;
    height: 600px;
}

JavaScript

var surface = document.getElementById('surface'),
    context = surface.getContext("2d"),
    row,
    col,
    triangleDirection = 1,
    triangleSize = 24,
    circleSize = 14,
    circleOffset = -(circleSize/2);

function shouldDraw(chances) {
    return Math.random() < chances;
}

function drawTriangle(x, y, direction, size, ctx) {
    ctx.fillStyle = "rgb(75,128,166)";
    ctx.beginPath();
    ctx.moveTo(x, y - (direction * size));
    ctx.lineTo(x - (direction * size), y + (direction * size));
    ctx.lineTo(x + (direction * size), y + (direction * size));
    ctx.lineTo(x, y - (direction * size));
    ctx.fill();
}

function drawCircle(x, y, size, ctx) {
    //circles
    ctx.fillStyle = "rgba(35,121,67,0.8)";
    ctx.beginPath();
    ctx.arc(x, y, size, 0, 2 * Math.PI, false);
    ctx.fill();
}

//Draw Tiangles
for(row = 0; row < 15; row++) {
    for(col = 0; col < 15; col++) {
        if(shouldDraw(0.7)) {
            drawTriangle(row*triangleSize, col*triangleSize*2, triangleDirection, triangleSize, context);
        }
        //Swap direction
        triangleDirection = -1*triangleDirection;
    }
}
for(row = 0; row < 15; row++) {
    for(col = 0; col < 15; col++) {
        if(shouldDraw(0.9)) {
            drawCircle(row*circleSize, col*circleSize*2, circleSize, context);
        }
    }
    //swap offset by row
    circleOffset = -1*circleOffset;
}