HTML5 Canvas, 2nd Edition

Examining the Code for BSBingo.html

Note

When designing an application for the iOS platform, we are actually targeting the Safari Mobile browser. This means that we can make concessions rather than having to target all available HTML5-compatible devices. You will notice this especially when we discuss <audio> tag usage.

The TextButton.js file

Our BS Bingo game will be played on a grid of 25 squares. We have created a class (an object prototype, actually) called TextButton.js to help us create buttons with the text, as well as a “press” state that we can use to show that the button has been clicked. You will want to save this file in the project folder along with the BSBingo.html file. Here is the code for this file:

function TextButton(x,y,text, width, height, backColor, strokeColor,
 overColor, textColor){
    this.x = x;
    this.y = y;
    this.text = text;
    this.width = width;
    this.height = height;
    this.backColor = backColor;
    this.strokeColor = strokeColor;
    this.overColor = overColor;
    this.textColor = textColor;
    this.press = false;
}

TextButton.prototype.pressDown=function() {
    if (this.press==true){
        this.press = false;
    }else{
        this.press = true;
    }
}

TextButton.prototype.draw = function(context){

    context.save();
    context.setTransform(1,0,0,1,0,0); // reset to identity
    context.translate(this.x, this.y);

    context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 3;
    context.shadowColor = "#222222";

    context.lineWidth = 4;
    context.lineJoin = 'round';
    context.strokeStyle = this.strokeColor ...