JSFiddle - React, Tailwind, and code Playground

by angstrey

HTML

<canvas id="tutorial" width="300" height="300">You don't have canvas!</canvas>

CSS

#tutorial
{
    border: solid 1px #e5e5e5;
}

JavaScript

// https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
(function (id) {
    var canvas = document.getElementById(id);
    
    if (!canvas.getContext) {
        return;
    }
    
    var ctx = canvas.getContext("2d");

    for (var i = 0; i < 4; i++ ) {
        for (var j = 0; j < 3; j++) {
            ctx.beginPath();
            
            var x = 25 + j * 50,
                y = 25 + i * 50,
                radius = 20,
                startAngle = 0,
                endAngle = Math.PI + (Math.PI * j) / 2,
                anticlockwise = (i % 2) !== 0;
            
            ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
            
            if (i > 1) {
                ctx.fill();
            } else {
                ctx.stroke();
            }
        }
    }
})("tutorial");