HTML and CSS Reference
In-Depth Information
this.pause = function(){
window.clearInterval(interval);
state = _self.state.PAUSED;
_self.callbacks.didPause.call(_self);
};
this.callbacks = {
didUpdateTime: function(time){},
didStartPlaying: function(){},
didPause: function(){},
didStop: function(){}
};
};
Now it's time to draw the stop button. The draw methods are called in the
this.draw
method and the context is taken from the private variable within the
class.
Drawing the Stop Icon
The stop button is 20px × 20px and should be a filled rectangle. To draw a
rectangle of any proportion, you can use the
context.fillRect()
method. The
fillRect
method takes the four parameters shown in Table 7-3.
Table 7-3.
fillRect Method Parameters
Parameter
Description
x
Where to place the upper-left x coordinate
of the rectangle in relation to the canvas
y
Where to place the upper-left y coordinate
of the rectangle in relation to the canvas
width
The width of the rectangle
height
The height of the rectangle
To draw a simple rectangle, 20px × 20px, you would use the following code:
context.fillStyle = '#000000';
context.fillRect(0, 0, 20, 20);
This would produce a rectangle similar to that shown in Figure 7-6.
