JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<canvas id="slide">
Your browser does not support the canvas tag.</canvas>

CSS

body {
    margin: 0;
    padding: 0;
    height: 100%;
}
html {
    height: 100%;
}

JavaScript

var canvas = document.getElementById('slide');
var ctx = canvas.getContext('2d');
var img = new Image();

function draw() {
    var w = canvas.width;
    var h = canvas.height;
    var l = w/2 - 120;
    var r = w/2 + 120; 
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0,50);
    ctx.lineTo(0,h);
    ctx.lineTo(w,h);
    ctx.lineTo(w,50);
    ctx.lineTo(r,50);
    ctx.bezierCurveTo((r-35),50,(r-70),0,(r-120),0);
    ctx.bezierCurveTo((l+70),0,(l+49),50,l,50);
    ctx.lineTo(0,50);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    ctx.restore();
}

function fitCanvasSize() {
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
}

window.addEventListener('resize', function () {
    fitCanvasSize();
    draw();
});

img.onload = function () {
    draw();
}
fitCanvasSize();
img.src = 'https://via.placeholder.com/100/0000FF/808080 ?Text=Digital.comC/O https://placeholder.com/';