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){
... = {
x: (canvas.offsetHeight / 2),
y: (canvas.offsetHeight / 2)
Search WWH ::

Custom Search