JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<canvas id="canvas" class="canva-img" width="800" height="400"></canvas>

CSS

.canva-img{
 position: absolute;
 clip-path: circle(100%); 
 animation: circle 10s infinite;
}

@keyframes circle {
 0% { clip-path: circle(0%); }
 100% { clip-path: circle(100%); }
}

JavaScript

function draw() {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  // Set the fill color
ctx.fillStyle = 'green';

// Fill the entire canvas with the chosen color
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
  // Draw frame
  ctx.drawImage(document.getElementById("frame"), 0, 0);
}
draw();