JSFiddle - React, Tailwind, and code Playground

by markm

HTML

<canvas id="aCanvas" width="361" height="324"></canvas>

JavaScript

function darkenImage(imageObj, percentage) {
        var canvas = document.getElementById('aCanvas');
        var context = canvas.getContext('2d');
        var x =0;
        var y =0;

        context.drawImage(imageObj, x, y);

        var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
        var data = imageData.data;

        for(var i = 0; i < data.length; i += 4) {
          // red
          data[i] = percentage * data[i];
          // green
          data[i + 1] = percentage * data[i + 1];
          // blue
          data[i + 2] =  percentage * data[i + 2] ;
        }

        // overwrite original image
        context.putImageData(imageData, x, y);
      }
var anImage = new Image();
      anImage.onload = function() {
        darkenImage(this, .5);
      };
anImage.crossOrigin = 'http://api.imgur.com/crossdomain.xml'
anImage.src = 'http://i.imgur.com/GnMumrk.png';