JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id="old" width="200" height="200"></canvas><br>

<canvas id="mix" width="200" height="200"></canvas><br>

<canvas id="current" width="200" height="200"></canvas><br>

CSS

canvas {border: 1px solid #000;}

JavaScript

var o = new Image();
var c = new Image();
var cold = old.getContext("2d");
var ccurrent = current.getContext("2d");
var cmix = mix.getContext("2d");
var l = 0;
o.src="https://london.hackspace.org.uk/members/camera.php?id=6";
o.onload = function() {
  console.log('mooo');
  cold.drawImage(this, -480,-190,800,1060);
};
c.src=o.src;
c.onload = function() {
  console.log('mooc');
  ccurrent.drawImage(this, -480,-190,800,1060);
};
setInterval(function(){
  l++;
  c.src="https://london.hackspace.org.uk/members/camera.php?id=6&" + l;
  cmix.globalCompositeOperation = "source-over";
  cmix.drawImage(old,0,0);
  cmix.globalCompositeOperation = "difference";
  cmix.drawImage(current,0,0);
},1000);