Capt. Horatio T.P. Webb

HTML 5 -- CANVAS EXAMPLE RECTANGLES

Parks -- Fall 2013

Methods:
name_for_the_canvas_context.rect(x,y,w,h)	Define the rectangle: x is the upper left-hand corner horizontal coordinate in pixels, y is the upper left-hand corner vertical coordinate in pixels, w is the horizontal width in pixels, h is the vertical height in pixels
name_for_the_canvas_context.stroke();	Draws the rectangle
name_for_the_canvas_context.fill();	Fills the rectangle
name_for_the_canvas_context.fillRect(x,y,w,h)	Define and draw the filled rectangle: x is the upper left-hand corner horizontal coordinate in pixels, y is the upper left-hand corner vertical coordinate in pixels, w is the horizontal width in pixels, h is the vertical height in pixels Uses fillStyle color If a border is desired on a filled rectangle, then in additionly use: name_for_the_canvas_context.stroke(); This makes the border with current lineWidth and strokeColor.
name_for_the_canvas_context.strokeRect(x,y,w,h)	Define and draw the rectangle: x is the upper left-hand corner horizontal coordinate in pixels, y is the upper left-hand corner vertical coordinate in pixels, w is the horizontal width in pixels, h is the vertical height in pixels Uses the cureent lineWidth and strokeColor.
name_for_the_canvas_context.clearRect(x,y,w,h)	Clear the rectangle: x is the upper left-hand corner horizontal coordinate in pixels, y is the upper left-hand corner vertical coordinate in pixels, w is the horizontal width in pixels, h is the vertical height in pixels

Here is a canvas for rectangles:

<canvas id="rect_example" width="500" height="200"" style="border:solid blue 1px;"></canvas>

Here is the code:

var rex = document.getElementById("rect_example");
var rexc = rex.getContext("2d");
rexc.beginPath();
rexc.rect(10,10,200,50);
rexc.stroke();
rexc.strokeText("1. 200 x 50 rectangle default color",35,25);

rexc.beginPath();
rexc.strokeStyle="blue";
rexc.lineWidth="8";
rexc.rect(250,10,200,50);
rexc.stroke();
rexc.lineWidth="1";
rexc.strokeText("2. 200 x 50 blue lineWidth=8",270,25);

rexc.beginPath();
rexc.fillStyle="green";
rexc.lineWidth="8";
rexc.fillRect(10,100,200,50);
rexc.lineWidth="1";
rexc.strokeStyle="white";
rexc.strokeText("3. 200 x 50 green fill",20,125);

rexc.beginPath();
rexc.fillStyle="yellow";
rexc.rect(250,100,200,50);
rexc.fill();
rexc.lineWidth="8";
rexc.strokeStyle="cyan";
rexc.stroke();

rexc.lineWidth="1";
rexc.strokeStyle="black";
rexc.strokeText("4. 200 x 50 yellow fill cyan border",270,125);