JSFiddle - React, Tailwind, and code Playground

by angstrey

HTML

<canvas id="tutorial" width="200" height="200">
    Your browser doesn't support canvas!
</canvas>

CSS

#tutorial
{
    border: solid 1px #999;
    box-shadow: 10px 10px 5px #ccc;
}

JavaScript

function draw(id) {
    var canvas = document.getElementById(id);

    if (!canvas.getContext) {
        return;
    }
   
    var ctx = canvas.getContext("2d");
    
    /*
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
    */
    
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, 2 * Math.PI, true);    // Outer cicle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);       // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, 2 * Math.PI, true);     // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, 2 * Math.PI, true);     // Right eye
    ctx.stroke();
    
    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(24, 24);
    ctx.lineTo(104, 24);
    ctx.lineTo(24, 104);
    ctx.fillStyle = "rgba(0, 0, 0, .5";
    ctx.fill();
    
    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    ctx.closePath();
    ctx.stroke();
}

draw("tutorial");