JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg"></script>
<canvas id="canvas" width="800px" height="300px"></canvas>

CSS

body{
	font-family: Helvetica, arial;
	background:#EEE;
}

#canvas{
	margin-top: 15%;
	border: 1px solid green;
}

JavaScript

var c       = document.getElementById("canvas"),
	ctx     = c.getContext('2d');
	img     = new Image(),
	img.src = "http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg";

img.onload = function(){
	ctx.drawImage(img, 0, 0, 400, 300);
}


//read the width and height of the canvas
var width	= c.width,
	height	= c.height,
	w2		= width / 2,
	imgData = ctx.getImageData(0, 0, 400, 300);

function drawing(){
	var index= (height * w2) * 4;	
	for(index= 0; index<=imgData.data.length; index+=4){
		red 	= imgData.data[index];
		green 	= imgData.data[index+1];
		blue	= imgData.data[index+2];
		alpha	= imgData.data[index+3]; 
	}
		ctx.putImageData(imgData, w2, 300);
}

drawing();