JSFiddle - React, Tailwind, and code Playground

by phejny

HTML

<canvas id="canvas" width="500" height="500">
</canvas>

CSS

#canvas {
  border: 1px solid #000000;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


var image = new Image();
image.crossOrigin = "Anonymous";
image.src = "http://libs.towns.cz/prednaskovy_sraz.jpg";

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0);


  var imageData = ctx.getImageData(1, 1, ctx.canvas.width, ctx.canvas.height);
  var data = imageData.data;

  var r1, g1, b1, r2, g2, b2;
  for (var i = 0; i < data.length; i += 4) {

    // red
    r1 = data[i];
    // green
    g1 = data[i + 1];
    // blue
    b1 = data[i + 2];


    r2 = r1;
    g2 = 255 - b1;
    b2 = 255 - g1;


    // red
    data[i] = r2;
    // green
    data[i + 1] = g2;
    // blue
    data[i + 2] = b2;

  }

  // overwrite original image
  ctx.putImageData(imageData, 1, 1);

};