HTML and CSS Reference
In-Depth Information
Figure 7-6.
A 20px × 20px rectangle
context.fillStyle
will set the fill for any new closed shape, such as a rectangle
or a circle, to black or #000000.
In the code to draw the rectangle on the play button for the stop symbol, you
need to take into consideration the position of the stop symbol in relation to the
canvas. You will want to place the stop symbol directly in the center of the
canvas. To center the stop symbol, you will need to calculate the x and y offsets
for the top-left corner of the stop symbol. To calculate this, you need to divide
the canvas width and height in half to give you the offsets. You can then
subtract the canvas centers from the center of the shape to give you the x and y
coordinates. This method simply aligns the center of the shape to be drawn with
the center of the canvas.
The following code will center the stop icon on the canvas in relation to the size
of the canvas itself.
app.playButton = function(id, track){
...
