JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<canvas width="250" height="200" style="border:1px solid #000"></canvas>

JavaScript

var cv = document.querySelector('canvas');
var ctx = cv.getContext('2d');

ctx.fillStyle = '#ff0';
ctx.fillRect(0, 0, 100, 80);



setTimeout(function() {
	var imageData = ctx.getImageData(0, 0, cv.width, cv.height);
  var pix  = new Uint32Array(imageData.data.buffer);
  
  var replacedColor = 0xff00ffff;
  var resultColor = 0xff1e3ce4;
  
  console.log(pix);

  for (var i = 0, n = pix.length; i < n; ++i) {
    if(pix[i] == replacedColor) {
    	pix[i] = resultColor;
    }

  }
  ctx.putImageData(imageData, 0, 0);

}, 2000);