JSFiddle - React, Tailwind, and code Playground

by Terry King

HTML

<img id="scream" src="http://1.purplecdn.com/i/p/42/4250-1624039807.jpg?1356562069" style="display:none;">
<canvas id="myCanvas" width="600" height="400"></canvas>

JavaScript

var canvas=document.getElementById('myCanvas');
var img=document.getElementById("scream");
var ctx=canvas.getContext('2d');
console.log(img.width);
canvas.width=img.width;
canvas.height=img.height;
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
ctx.drawImage(img,0,0);

var imgData=ctx.getImageData(0,0,50,50);
// invert colors
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);