JSFiddle - React, Tailwind, and code Playground

by angstrey

HTML

<canvas id="tutorial1" width="200" height="200">You don't have canvas!</canvas>
<canvas id="tutorial2" width="200" height="200">You don't have canvas!</canvas>

CSS

#tutorial1, #tutorial2
{
    border: solid 1px #e5e5e5;
}

JavaScript

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

    // Quadratic curves example
    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
    ctx.fillStyle = "#ffc";
    ctx.fill();
}
        
function drawHeart(id) {
    var canvas = document.getElementById(id);
    
    if (!canvas.getContext) {
        return;
    }
    
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fill();
    ctx.strokeStyle = "rgb(80, 0, 0)";
    ctx.stroke();
}
        
drawCallout("tutorial1");
drawHeart("tutorial2");