JSFiddle - React, Tailwind, and code Playground

by swarnendu

HTML

<div id="d3">
				<canvas width="100" height="100" id="c3">	</canvas>
		</div>
		<div id="d4">
				<canvas width="100" height="100" id="c4">	</canvas>
		</div>

CSS

#d3,#d4,#c3,#c4{position:absolute;top:20px;left:150px}
			
			#C3{					
			
			-webkit-transform: rotateZ(50deg) ;
			-moz-transform: rotateZ(50deg) ;
			-o-transform: rotateZ(50deg) ;
			transform: rotateZ(50deg); 

			
        }

JavaScript

var c = document.getElementById("c3");
				var ctx=c.getContext("2d");
				ctx.fillStyle="#f0F";
				ctx.fillRect(0,0,100,100);
				ctx.fillStyle="#0FF";
				ctx.fillRect(25,25,50,50);

				c = document.getElementById("c4");
				ctx=c.getContext("2d");
				ctx.strokeStyle="#00f";
				ctx.strokeRect(0,0,100,100);