Composite canvas video

by Ajey

HTML

<div id="theater">
   <video id="video1" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video>
   
 </div>

<div class="canvas-container">
<canvas id="canvas" height=400 width=600></canvas>
</div>

<canvas id="destination" height=400 width=600></canvas>

CSS

#canvas {
  width: 200;
  height: 600;
  background: grey;
  /* visibility: hidden; */
}

#destination {
  position: absolute;
  top: 0;
  right: 0;
  background: blue;
}

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");

const destinationCanvas = document.getElementById("destination");
destinationCtx = destinationCanvas.getContext('2d');

video.addEventListener('play', () => {
  function step() {
    ctx.drawImage(video, 0, 0, 300, 200)
    ctx.drawImage(video, 300, 0, 300, 200)
    ctx.drawImage(video, 0, 200, 300, 200)
    ctx.drawImage(video, 300, 200, 300, 200)
    
    destinationCtx.drawImage(canvas, 0, 0);
   
    requestAnimationFrame(step)
  }
  requestAnimationFrame(step);
})