JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<canvas id='can' width=400 height=400 style='border:1px solid #F00'></canvas>

JavaScript

var ctx=document.getElementById('can').getContext('2d');
ctx.lineWidth=10
ctx.globalCompositeOperation ='source-out'
ctx.fillStyle="#Ff02F2";
ctx.strokeStyle="rgba(255,255,255,1)"


for(var x=0;x<300;x+=3){
    ctx.beginPath()
    ctx.moveTo(x,50);
    ctx.lineTo(x-100,300);
    ctx.stroke()
    ctx.closePath()
}

ctx.beginPath()
for(var x=0;x<=180;x++){
    y=Math.sin(Math.PI/180*x)*-100
    
    ctx.lineTo(x+10,y+200);
    
}
ctx.closePath();
ctx.fill();

ctx.globalCompositeOperation ='source-over'