HTML and CSS Reference
In-Depth Information
strokeRect(x,y,width,height)
Draws a rectangular outline at position x , y for width and height. This makes use
of the current strokeStyle , lineWidth , lineJoin , and miterLimit settings.
clearRect(x,y,width,height)
Clears the specified area and makes it fully transparent (using transparent black as
the color) starting at position x , y for width and height.
Before we can use any of these functions, we will need to set up the fill or stroke style
that will be used when drawing to the canvas.
The very basic way to set these styles is to use a color value represented by a 24-bit hex
string. Here is an example from our first demonstration:
context.fillStyle = '#000000';
context.strokeStyle = '#ff00ff';
In Example 2-1 , the fill style is simply set to be the RGB color black, while the stroke
style is a classic purple color. The results are shown in Figure 2-1 :
Example 2-1. Basic rectangles
function drawScreen() {
context.fillStyle = '#000000';
context.strokeStyle = '#ff00ff';
context.lineWidth = 2;
context.fillRect(10,10,40,40);
context.strokeRect(0, 0,60,60);
context.clearRect(20,20,20,20);
}
Figure 2-1. Basic rectangles
The Canvas State
When we draw on the Canvas context, we can make use of a stack of so-called drawing
states . Each of these states stores data about the Canvas context at any one time. Here
is a list of the data stored in the stack for each state:
• Transformation matrix information such as rotations or translations using the
context.rotate() and context.setTransform() methods
• The current clipping region
 
Search WWH ::




Custom Search