JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id="canvas" width ="1024" height ="768"></canvas> 
<div id="container">
  <div id="textBox">
  Velocity:
		<input type="text" id="textbox" value="0">
  </div>
  <div id="slider">
  Slider:
	 <form oninput="amount.value=rangeInput.value">
			<input type="range" id="rangeInput" name="rangeInput" min="-100" max="100" step="3" value="">
			<output name="amount" for="rangeInput">0</output>
	 </form>
  </div>
</div>
</body>

CSS

<style type="text/css">
	body 
	{
		text-align:center;
	}
	#container
	{
			position:fixed;
			color: red;
			top: 0px;
			left: 0px;
	}
	#textBox
	{
			position:absolute;
			top: 25px;
			left: 5px;
	}
	#slider
	{
			position:absolute;
			top: 25px;
			left: 200px;
	}
</style>

JavaScript

ImageObject = {};
var MainCtx;
var MainCanvas;
//get the image pixel properties

function start()
{
	//load up the main canvas and ctx 
	MainCanvas = document.getElementById("canvas");
	MainCtx = MainCanvas.getContext('2d');

    //first load up the image and then get its pixel data
    ImageObject.loadImage(function(imageData){
    	ImageObject.imageData = imageData;
    	ImageObject.data = ImageObject.imageData.data;
    	
		console.log(ImageObject.data); // -> data return all 0's in the array

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

      ImageObject.ctx.putImageData(ImageObject.imageData,ImageObject.image.width,ImageObject.image.height);
  });
}

ImageObject.loadImage = function(callback)
{
	ImageObject.image = new Image();
	ImageObject.image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
	ImageObject.image.addEventListener('load',function()
	{
		MainCtx.drawImage(ImageObject.image,0,0);
		callback(ImageObject.getImageData(ImageObject.image));
	});
}

ImageObject.getImageData = function(img)
{
	this.canvas = getCanvas(img.width,img.height);
	this.ctx = this.canvas.getContext('2d');
	return this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);
}

function getCanvas(w,h)
{
	var c = document.createElement('canvas');
	c.width = w;
	c.height = h;
	return c;
}

start();