JSFiddle - React, Tailwind, and code Playground

by kumamio

HTML

<canvas id="ex1"></canvas>

CSS

canvas{
		border:1px solid #333;

	}

JavaScript

var canvas  = document.getElementById("ex1");
	var context = canvas.getContext("2d");
	var width  = 200;
	var height = 100;
	context.beginPath();
	context.fillStyle="red";
	context.rect(0,0,50,50);
	context.fill();
	var imageData = context.getImageData(0,0,10, 10);
	
	console.info(imageData);
	var imageDataData = imageData.data;
	for (var i = 0; i < 10; i++) {
		for (var j = 0; j < 10; j++) {
			imageDataData[4*(i+j*10)]=0;
		};
	};
	context.putImageData(imageData, 70, 70);