JSFiddle - React, Tailwind, and code Playground

by heldersepu

HTML

<div class="scaleable-wrapper" id="scaleable-wrapper">
  <div class="very-specific-design" id="very-specific-design">
<button id="sweep">
Animate
</button>
</div>
</div>

CSS

canvas{
  position: absolute;
  top:0;
  left:0
  width: 1250px;
   height: 703px;
  
}
button{
  color: white;
  background-color: grey;
}

#scaleable-wrapper {
    position: relative;
    height: -webkit-fill-available;
    resize: both;
    overflow: visible;
}

#very-specific-design {
    width: 1250px;
    height: 703px;
    position: relative;
    left: 0px;
    top: 0px;
    transform-origin: 0px 0px;
    overflow: visible;
}

JavaScript

var el = document.createElement("canvas");
  var ctx = this.el.getContext("2d");
  var dpr = window.devicePixelRatio || 1;  
  this.scale = (window.innerWidth) / 1250;
  this.el.width = this.el.height = 500;
  document.getElementById("very-specific-design").appendChild(this.el);
  
  //add the image 
  var sweepImgData
  var base_image = new Image();
  base_image.src = 'http://placekitten.com/200/300';
  base_image.crossOrigin = "anonymous";
  base_image.onload = function() {
    ctx.drawImage(base_image, 10, 10, 50, 50);
    sweepImgData = ctx.getImageData(10, 10, 50, 50);
  }

  $("#sweep").click(function() {    
    sweep(10, 10, 200, 200);
  });


  function sweep(fromX, fromY, toX, toY) {
    var scale = (window.innerWidth) / 1250;
    var origX = fromX;
    var origY = fromY;
    var steps = 20;
    var incrementX = Math.ceil((origX - toX) / steps);
    var incrementY = Math.ceil((origY - toY) / steps);
    var currentX = (origX * scale);
    var currentY = (origY * scale);

    for (let a = 0; a < steps; a++) {
      setTimeout(function() {
        ctx.save();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, 500, 500);
        currentX = currentX - incrementX;
        currentY = currentY - incrementY;
        ctx.putImageData(sweepImgData, currentX, currentY);
        ctx.restore();
      }, a * 25);
    }
  }