JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div id="message">DnD image in the box</div>
  <div id="imageBox">
    <canvas id="canvas"></canvas>
  </div>
  <ul id="filterBox">
    <li><input type="radio" name="filter" value="normal" id="normal" checked="checked"/><label for="normal">Normal</label></li>
    <li><input type="radio" name="filter" value="monocolor" id="monocolor"/><label for="monocolor">Inkwell</label></li>   
    <li><input type="radio" name="filter" value="gotham" id="gotham"/><label for="gotham">Gotham</label></li>  
    <li><input type="radio" name="filter" value="sepia" id="sepia"/><label for="sepia">Sepia</label></li>   
    <li><input type="radio" name="filter" value="invert" id="invert"/><label for="invert">Invert</label></li>   
    <li><input type="radio" name="filter" value="yuv" id="yuv"/><label for="yuv">YUV</label></li>   
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ccc;
  padding: 3px;
  font-size: 12px;
  font-family: "verdana",sans-serif;
}

#message {
  padding-left: 15px;
}

#imageBox {
  margin: 5px auto;
  background-color: #fff;
}

#filterBox {
  height: 20px;
  padding-left: 15px;
  list-style: none;
}

#filterBox li {
  display: inline;
  margin-left: 5px;
}

#filterBox li label {
  margin-left: 3px;
}

JavaScript

var currentImage = null;
var imageWidth, imageHeight;

var drawImage = function(image, width, height, repeat) {
  var box = document.getElementById('imageBox');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  
  var sw = image.width;
  var sh = image.height;

  var scalew = width / sw;
  var scaleh = height / (sh * repeat);
  var scale = Math.min(scaleh, scalew);

  var dw = (sw * scale) | 0;
  var dh = (sh * scale) | 0;

  context.clearRect(0, 0, canvas.width, canvas.height);
  canvas.width = dw;
  canvas.height = dh * repeat;
  canvas.style.margin = (height - dh * repeat)/2 + 'px ' + (width - dw)/2 + 'px';
  for (var i = 0; i < repeat; ++i)
    context.drawImage(image, 0, 0, sw, sh, 0, i * dh, dw, dh);
};

var render = function(filter, repeat) {
  if (!currentImage) { return; } 
  
  if (repeat == null)
  	repeat = 1;
  
  drawImage(currentImage, imageWidth, imageHeight, repeat);
  
  if (filter) {  
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var cw = canvas.width;
    var ch = canvas.height;
    
    var inputData = context.getImageData(0, 0, cw, ch);
    var outputData = context.createImageData(cw, ch);
    
    var src = inputData.data;
    var dest = outputData.data;
    
    filter(src, dest, cw, ch);
    
    context.putImageData(outputData, 0, 0);
  }
};

var RGBtoYUV = function(r, g, b) {
  var p = {};
  p.y =  (0.299 * r) + (0.587 * g) + (0.114 * b);
  p.u = -(0.169 * r) - (0.331 * g) + (0.500 * b);
  p.v =  (0.500 * r) - (0.419 * g) - (0.081 * b);
  return p;
};
  
var YUVtoRGB = function(y, u, v) {
  var p = {};
  p.r = y             + 1.402 * v;
  p.g = y - 0.334 * u - 0.714 * v;
  p.b = y + 1.772 * u;
  return p;
};

var monocolorFilter = function(src, dest, width, height) {
  var size = width * height * 4;
  for (var i=0; i<size; i+=4) {
    var yuv = RGBtoYUV(src[i], src[i+1], src[i+2]);
    yuv.u = 0;
    yuv.v = 0;
    var rgb = YUVtoRGB(yuv.y,...