JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<canvas id="face" width="150" height="150"></canvas> 

<button onClick="draw('happy')">Happy</button>
<button onClick="draw('sad')">Sad</button>

JavaScript

function draw(mood) {
    var canvas = document.getElementById('face');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.clearRect ( 0 , 0 , 150 , 150 );

        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
        if (mood == 'sad') {
            ctx.moveTo(110, 120);
            ctx.arc(75, 120, 35, 0, Math.PI, true); // Mouth (clockwise)
        } else {
            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, Math.PI * 2, true); // Left eye  
        ctx.moveTo(95, 65);
        ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye  
        ctx.stroke();
    }
}