FabricJS Canvas Histogram

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<canvas width="600" height="400" id="c"></canvas>
<img style="display:none" src="https://images.unsplash.com/photo-1534809027769-b00d750a6bac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjU1MjA5fQ&w=2333.3333333333&name=unsplash-Model - Kenagonio https://www.instagram.com/kenagonio/
Photographer - Judeus Samson https://www.instagram.com/judeus.samson.jpg" id="my-image" crossorigin="anonymous">

<img id='histogram'>

JavaScript

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 50,
  angle: 0,
  opacity: 1,
  scaleX:0.1,
  scaleY:0.1
});
canvas.add(imgInstance);


var Histogram = function(source,target){
	this.source = source;
  this.target = target;
	this.init = function(){
    this.tempCanvas = document.createElement("canvas");
    var wh = this.source._calculateCurrentDimensions();
    this.tempCanvas.width = wh.x;
    this.tempCanvas.height = wh.y
    this.tempCtx = this.tempCanvas.getContext("2d");
    this.tempCtx.drawImage(this.source._originalElement,0,0,this.source.width,this.source.height,0,0,wh.x,wh.y);
  };
  
  this.process = function(){
  	var imgData = this.tempCtx.getImageData(0,0,this.tempCanvas.width,this.tempCanvas.height);
    var histogram = this.histogram = {
    	red:[],
      green:[],
      blue:[],
      black:[]
    };
    
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
      var r = imgData.data[i];
      var g = imgData.data[i + 1];
      var b = imgData.data[i + 2];
      histogram.red[r] = histogram.red[r]?histogram.red[r]+1:1;
      histogram.green[g] = histogram.green[g]?histogram.green[g]+1:1;
      histogram.blue[b] = histogram.blue[r]?histogram.blue[b]+1:1;
      var avg = Math.round((r+g+b)/3);
      histogram.black[avg] = histogram.black[avg]?histogram.black[avg]+1:1;
    }
  };
  
  this.draw = function(channels){
  	var maxVal = 0;
    this.histogram.red.filter(function(v){
    	if (v>maxVal){
      	maxVal = v;
      }
    });
    this.histogram.green.filter(function(v){
    	if (v>maxVal){
      	maxVal = v;
      }
    });
    this.histogram.blue.filter(function(v){
    	if (v>maxVal){
      	maxVal = v;
      }
    });
    
    this.histogram.black.filter(function(v){
    	if (v>maxVal){
      	maxVal = v;
      }
    });
    
  	var hCanvas = document.createElement("canvas");
    var hCtx = hCanvas.getContext("2d");
   ...