JavaScript for Mobile - Learn HTML5 and JavaScript for Android - page 198

Table 7-4. Basic 2D Context API Properties

Property Description

context.fillStyle

Sets the fill color of the shape to be drawn.
This can be a solid color using either a hex
color (#000000), an RGB color (rgb(0,0,0)), or
an alpha color (rgba(0,0,0,0.5)).

context.lineWidth

This will set the width of any lines drawn
after this is set. Values are doubles, such as
1.5.

context.lineCap

This will set the cap style of any line. Valid
values are butt , round , and square .

context.strokeStyle

This is the stroke style for the context. It sets
the color of any line drawn after setting this.
This can be a solid color using either a hex
color (#000000), an RGB color (rgb(0,0,0)), or
an alpha color (rgba(0,0,0,0.5)).

Table 7-5. Basic 2D Context API Methods

Method Description

context.fillRect(x, y, width, height) This will create a rectangle with the
properties specified.

context.strokeRect(x, y, width, height) This will create a rectangle with no fill, but a
stroke with the properties specified.

context.clearRect(x, y, width, height) This will draw a “white” rectangle with the
properties specified.

context.arc(x, y, center, start angle,
end angle, anticlockwise)

This will draw an arc using the properties
specified. The start and end angles are
defined as radians. anticlockwise is a
Boolean value and is used to specify in
which way to draw the arc.

With the style properties set, you can now draw the stop icon using
context.fillRect() .