JSFiddle - React, Tailwind, and code Playground

by Piara Singh

HTML

<canvas id="tds" height=400 width=400></canvas>

CSS

canvas {
    border: 4px solid green;
}

JavaScript

var tds = document.querySelector('#tds'), ctx = tds.getContext('2d');
ctx.lineWidth = 2;

ctx.globalCompositeOperation = "destination-over";
//ctx.globalCompositeOperation = 'destination-atop';

ctx.fillStyle = 'rgba(50,200,50,0.5)';
// HEAD
ctx.moveTo(100,100);
ctx.bezierCurveTo(50,5,250,5,200,100);//middle head
ctx.moveTo(100,100);
ctx.bezierCurveTo(50,50,250,50,200,100);// round head
ctx.moveTo(100,100);
ctx.bezierCurveTo(0,-20,300,-20,200,100);// top head

// FACE
ctx.moveTo(100,100);
ctx.bezierCurveTo(120,180,180,180,200,100); // face outline

// EYEBROWS
ctx.moveTo(110,90);
ctx.bezierCurveTo(120,80,135,80,140,85); //eybrow one
ctx.moveTo(160,85);
ctx.bezierCurveTo(165,80,180,80,190,90); // eyebrow two

ctx.moveTo(120,100);
ctx.bezierCurveTo(125,90,130,90,135,100); // Eye one upper
ctx.moveTo(120,100);
ctx.bezierCurveTo(125,110,130,110,135,100); // Eye one bottom 

ctx.moveTo(165,100);
ctx.bezierCurveTo(170,90,175,90,180,100); // Eye two upper
ctx.moveTo(165,100);
ctx.bezierCurveTo(170,110,175,110,180,100); // Eye two bottom

// NOSE
ctx.moveTo(150,95);
ctx.bezierCurveTo(148,105,120,130,150,120); // Nose

// SMILE
ctx.moveTo(125,130);
ctx.bezierCurveTo(140,150,160,150,175,130);
ctx.fill();
ctx.stroke();

//ctx.fill();
//ctx.bezierCurveTo(30,30,200,80,200,120);

ctx.moveTo(200,200);
ctx.bezierCurveTo(150,150,120,220,200,300);
ctx.bezierCurveTo(280,220,250,150,200,200);

ctx.fillStyle = 'rgba(200,40,30,0.6)';
ctx.fill();
ctx.stroke();