JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Why does this not work?</h1>
<table>
	<tr><td>
		<canvas id="imageCanvas" width="600" height="800"></canvas>
	</td></tr>
</table>

CSS

body {
	margin: 0px;
	padding: 0px;
	}

JavaScript

var canvas = document.getElementById('imageCanvas');

var image = new Image();
image.src = 'http://emoticons.pw/emoticons/emoticon-faces-002-medium.png';

image.onload = function(){

	width=image.width;
	height=image.height;
	
	var context = canvas.getContext('2d');
	context.fillStyle="#024359"; // canvas background color
	context.fillRect(0, 0, width, height);
	context.drawImage(this,0,0);
	
	imageData = context.getImageData(0,0,width, height);
	
	context.putImageData(imageData, 0, 0);
};