Apply image filters to multiple canvases

by Michael Prosser

HTML

<canvas id="image-source"></canvas>
<canvas id="image-grayscale"></canvas>
<canvas id="image-invert"></canvas>
<canvas id="image-blur"></canvas>

JavaScript

const img = new Image(200,200);
img.src = 'https://scubanaut.io/swatchify/assets/SampleImage.webp';
const canvasSource = document.querySelector('#image-source');
const canvasGrayscale = document.querySelector('#image-grayscale');
const canvasInvert = document.querySelector('#image-invert');
const canvasBlur = document.querySelector('#image-blur');
const ctxSource = canvasSource.getContext('2d');
const ctxGrayscale = canvasGrayscale.getContext('2d');
const ctxInvert = canvasInvert.getContext('2d');
const ctxBlur = canvasBlur.getContext('2d');

img.onload = function() {
  canvasSource.width = img.width;
  canvasSource.height = img.height;
  canvasGrayscale.width = img.width;
  canvasGrayscale.height = img.height;
  canvasInvert.width = img.width;
  canvasInvert.height = img.height;
  canvasBlur.width = img.width;
  canvasBlur.height = img.height;


  //ctxSource.filter = 'grayscale(1)';
  ctxGrayscale.filter = 'grayscale(1)';
  ctxInvert.filter = 'invert(1) hue-rotate(90deg)';
  ctxBlur.filter = 'blur(1)';

  ctxSource.drawImage(img, 0, 0, img.width, img.height);
  ctxGrayscale.drawImage(img, 0, 0, img.width, img.height);
  ctxInvert.drawImage(img, 0, 0, img.width, img.height);
  ctxBlur.drawImage(img, 0, 0, img.width, img.height);
}