JSFiddle - React, Tailwind, and code Playground

by swarnendu

HTML

<div id="d1">
				<canvas width="400" height="400" id="c1"> </canvas>
		</div>
		<div id="d2">
				<canvas width="400" height="400" id="c2">	</canvas>
		</div>

CSS

#d1,#c2,#c1{position:absolute;top:0px;left:0px}
			#d2{position:absolute;top:0px;left:300px}

JavaScript

// non zero rule		
				var canvas = document.getElementById('c1');
				var ctx = canvas.getContext('2d');
				ctx.fillStyle = 'rgb(255,0,255)';
				ctx.beginPath();
				ctx.arc(75, 75, 75, 0, Math.PI*2, true);
				ctx.arc(75, 75, 25, 0, Math.PI*2, true);
				ctx.fill("nonzero");
					

				// even odd rule
				var canvas = document.getElementById('c2');
				var ctx = canvas.getContext('2d');
				ctx.fillStyle = 'rgb(255,0,255)';
				ctx.beginPath();
				ctx.arc(75, 75, 75, 0, Math.PI*2, true);
				ctx.arc(75, 75, 25, 0, Math.PI*2, true);
				ctx.fill("evenodd");