JSFiddle - React, Tailwind, and code Playground

by QW01_01

HTML

<h1>hello world</h1>
<canvas id="canvas" width="400" height="300"></canvas>

CSS

body{
    background:gray;
}

canvas{
    position:absolute;
    top:0;
    left:0;
}

h1{
    font-family:Arial;
    font-size:70px;
}

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 60, 60);

ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(60, 60, 40, 0, Math.PI*2, true);
ctx.fill();

ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();