JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<canvas id="canvas"></canvas>

CSS

* {
  margin: 0;
  padding: 0;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);

ctx.fillStyle="#FF0000";
ctx.fill();
//console.log(ctx.getImageData(10, 10, 100, 100));


var x = new Uint8ClampedArray([1,2,3,4,5,6,7,8,9,10,11,12]);

var newData = new Uint8ClampedArray(x.length);
//console.log(x);
newData.set(extractChannel(0,1,0,0)) // extract red
console.log(newData)
newData.set(extractChannel(1,0,1,0)) // extract red
console.log(newData)
function extractChannel(r,g,b,a) {  
  var temp = [];
  for (var i = 0; i< x.length; i+=4) {
    temp[i] = r ? x[i] : 0;
    temp[i+1] = g ? x[i+1] : 0;
    temp[i+2] = b ? x[i+2] : 0;
    temp[i+3] = a ? x[i+3] : 0;
  }
  return temp;
}