JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<div id="content">
    <canvas id="canvas" height="100" width="100"></canvas>
</div>

CSS

* {
	margin:0;
	padding:0;
	overflow:hidden;
}

JavaScript

(function(){
    var canvas = document.getElementById('canvas'),
	    ctx = canvas.getContext("2d");

		drawImage(ctx);
		replace_canvas_with_img();						
})();


function drawImage(ctx) {
	var img = ctx.createImageData(canvas.width,canvas.height);
				
		for (var i=img.data.length;i-=4;) {
					
            img.data[i] = Math.floor(Math.random() * 255);
            img.data[i+1] = Math.floor(Math.random() * 255);
            img.data[i+2] = Math.floor(Math.random() * 255);
            img.data[i+3] = Math.floor(Math.random() * 255);

		}
		ctx.putImageData(img, 0, 0);
		console.log(img.data);
		console.log(ctx.getImageData(0,0,canvas.width, canvas.height).data);

}				

function replace_canvas_with_img() {
	$('#content').html('<img src="' + canvas.toDataURL('image/png', 1) + '" />');
}