JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <canvas id="canvas"></canvas>
  <canvas id="buffer"></canvas>
</body>

JavaScript

var image = new Image();

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

    var buffer = document.getElementById('buffer');
    var bctx = buffer.getContext('2d');

    image.onload = function(){
      var w = this.width;
      var h = this.height;
      canvas.width = buffer.width = w;
      canvas.height = buffer.height = h;
      ctx.drawImage(image, 0, 0, w, h);
      //bctx.drawImage(image, 0, 0, w, h);

      var data = ctx.getImageData(0, 0, w, h);
      var pixels = data.data;
      //process image - makes it greyscale
      for(var i = 0, l = pixels.length/4; i < l; i++){
        var ind = i * 4;
        var avg = Math.round((pixels[ind] + pixels[ind + 1] + pixels[ind + 2])/3);
        pixels[ind] = pixels[ind + 1] = pixels[ind + 2] = avg;
      }

      //put image data works on desctop,
      //android 4.1.2 stock browser
      //but not android 4.1.2 Chrome
      bctx.putImageData(data, 0, 0);
    }
    image.src = 'https://ec2-18-218-135-42.us-east-2.compute.amazonaws.com/Images/sep10/1335704170515115.jpg';