Canvas Rectangles

by isogunro

HTML

<!-- step 1: Define canvas element -->
		<canvas id="myCanvas" width="600" height="800" style="background-color:#efefef;" />

JavaScript

//Rectangle and Ellipse Functions
//arc, arctTo, clearRect, fill, fillRect, rect, stroke, strokeRect

/*
arc(x,y,radius,startAngle,endAngle,antiClockwise)
arcTo(x1,y1,x2,y2,radius)

Properties:
fillStyle, strokeStyle
*/

//FUNCTIONS
/*
   -used to clear a rectangle
   clearRect(x,y,w,h)
   
   --used to fill a rectangle with a specific color
   fillRect(x,y,w,h)
   
   --draws rectangle
   rect(x,y,w,h)
   
   --renders the outer border
   strokeRect(x,y,w,h)
*/

				//Step 2: Find the canvas
				var canvas = document.getElementById('myCanvas');
				
				//Step 3: Access the 2d contextmenu (pen/brush)
				var ctx = canvas.getContext('2d');
				
				ctx.fillStyle='Navy';
				ctx.fillRect(10,50,100,200);
				
				ctx.strokeStyle = 'navy';
				ctx.strokeRect(190,50,100,200);
				
				ctx.fillStyle='green';
				ctx.strokeStyle = 'black';
				ctx.fillRect(190,350,100,200);
				ctx.strokeRect(190,350,100,200);
				
				ctx.fillStyle='green';
				ctx.strokeStyle = 'black';
				ctx.rect(10,350,100,200);
				ctx.fill();
				ctx.stroke(10,350,100,200);