JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<div id="canvasContents">canvas contents</div>
<canvas id="myCanvas" width="500" height="400"></canvas>

CSS

canvas {
    position:absolute
}
#canvasContents {
    position:absolute;
    background:blue;
    width:500px;
    height:400px;
    line-height:400px;
    text-align:center
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 120,
    y = 70;
context.fillRect(0, 0, canvas.width, canvas.height);

context.save();
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(x, y, x + 6, y - 82, x + 98, y - 25);
context.bezierCurveTo(x + 210, y - 5, x + 325, y + 2, x + 283, y + 78);
context.bezierCurveTo(x + 244, y + 173, x + 237, y + 270, x + 138, y + 235);
context.bezierCurveTo(x - 29, y + 185, x - 145, y + 154, x - 65, y + 99);
context.closePath();
context.clip();
context.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();