JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div style="display:none;">
  <img id="logo_source"...

JavaScript

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

var img = new Image();
img.src = $("#logo_source").attr("src");
img.onload = function(){
	//logo.width = img.width;
	//logo.height = img.height;
	ctx.drawImage(img, 0, 0);
  // create hidden canvas (using image dimensions)
  //var canvas = document.createElement("canvas");
  //canvas.width = logo.offsetWidth;
  //canvas.height = logo.offsetHeight;
  //var context = canvas.getContext("2d");
  //ctx.drawImage(imgElement,0,0);
  //var map = ctx.getImageData(0,0,img.width,img.height);
  //var imdata = map.data;
  // convert image to grayscale
  //var r,g,b,avg;
  //for(var p = 0, len = imdata.length; p < len; p+=4) {
       //r = imdata[p]
       //g = imdata[p+1];
       //b = imdata[p+2];
       // alpha channel (p+3) is ignored
       //avg = Math.floor((r+g+b)/3);
       //imdata[p] = imdata[p+1] = imdata[p+2] = avg;
   //}
   //context.putImageData(map,0,0);
   // overlay filled rectangle using lighter composition
   //context.globalCompositeOperation = "lighter";
   //context.globalAlpha = 0.5;
   //context.fillStyle="red";
   //context.fillRect(0,0,canvas.width,canvas.height);
};