javascript

Drawing Rectangles
Chapter 21: Upcoming API s
The only shape that can be drawn directly on the 2D drawing context is the rectangle. There are
three methods for working with rectangles: fillRect() , strokeRect() , and clearRect() . Each
of these methods accepts four arguments: the x - coordinate of the rectangle, the y - coordinate of the
rectangle, the width of the rectangle, and the height of the rectangle. Each of these arguments is
considered to be in pixels.
The fillRect() method is used to draw a rectangle that is filled with a specific color onto the
canvas. The fill color is specified using the fillStyle property, which starts out equal to black
( “ #000000 ” ). You can set this property to any color specified in six hex digits or by using the CSS rgb()
and rgba() formats. Here is an example:
var drawing = document.getElementById(“drawing”);
//make sure < canvas > is completely supported
if (drawing.getContext){
var context = drawing.getContext(“2d”);
/*
* Based on Mozilla’s documentation:
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
*/
//draw a red rectangle
context.fillStyle = “#ff0000”;
context.fillRect(10, 10, 50, 50);
}
//draw a blue rectangle that’s semi-transparent
context.fillStyle = “rgba(0,0,255,0.5)”;
context.fillRect(30, 30, 50, 50);
This code first sets the fillStyle to red and draws a rectangle located at (10,10) that ’ s 50 pixels tall and
wide. Next, it sets the fillStyle to a semi - transparent blue color using rgba() format and draws
another rectangle that overlaps the first. The result is that you can see the red rectangle through the blue
rectangle (see Figure 21 - 1 ).
Figure 21-1
683