HTML and CSS Reference
In-Depth Information
Figure 7-5.
Canvas grid
To begin, you will need to define a few global variables.
app.playButton = function(id, track){
var canvas = document.getElementById(id),
context = canvas.getContext('2d'),
track = track,
_self = this;
}
As you can see, you get the Canvas element by using
getElementById
. You then
get the Canvas context by using
canvas.getContext('2d')
, which will return a
2d Canvas context for you to draw on. You then explicitly declare the track
variable and again define
_self
as
this
for any callback methods.
You can make it easier to calculate certain aspects of the canvas by creating
new properties for the Canvas element. This is done using the following code:
app.playButton = function(id, track){
...
canvas.center = {
x: (canvas.offsetHeight / 2),
y: (canvas.offsetHeight / 2)
};
