【JAVASCRIPT】Mask or clip the image on canvas and move it

index.html

<canvas id="canvas" width="480" height="360"></canvas>

javascript-mask-or-clip-the-image-on-canvas-and-move-it.markdown

【JAVASCRIPT】Mask or clip the image on canvas and move it

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

var w = 480; 
var h = 360; 
var c = 0;
window.onload = function() {
  draw();
}
function draw() {
  var canvas = document.getElementById('canvas');
  if(!canvas || !canvas.getContext) return false;
  var ctx = canvas.getContext('2d');
  
  var img = new Image();
  img.src = 'https://picsum.photos/480/360';
  img.onload = function() {
    setInterval(function() {
      ctx.restore();
      ctx.save();
      
      ctx.beginPath();
      ctx.arc(c, 180, 100, 0, Math.PI * 2, false);
      ctx.arc(w - c, 180, 100, 0, Math.PI * 2, false);
      ctx.clip();
      
      ctx.drawImage(img, 0, 0);
      
      c += 1;
      if(c > w) {
        c = 0;
      }
    }, 20);
  }
}