HTML and CSS Reference
In-Depth Information
this.pause = function(){
state = _self.state.PAUSED;;
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
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
Where to place the upper-left x coordinate
of the rectangle in relation to the canvas
Where to place the upper-left y coordinate
of the rectangle in relation to the canvas
The width of the rectangle
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.
Search WWH ::

Custom Search