JSFiddle - React, Tailwind, and code Playground

by farhatdz

HTML

<img id="imgSrc" src="https://i.ytimg.com/vi/FkYzxSW5hn4/maxresdefault.jpg" />

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

JavaScript

window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("imgSrc");
context.drawImage(image, 0, 0);
var imageData = context.getImageData(0,0,400,400);
var px = imageData.data;
var length = px.length;
for (var i=0;i<length;i++){
var redPx = px[i];
var greenPx = px[i+1];
var bluePx = px[i+2];
var alphaPx = px[i+3];
var greyscale = redPx*0.3 + greenPx*0.59 + bluePx*0.11 ;
px[i] = greyscale;
px[i+1] = greyscale;
px[i+2] = greyscale;
}
context.putImageData(image,0,0);
};