The Memory (aka Concentration) Game - The Essential Guide to HTML5 - page 173

secondcard = i;

ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight)
;

Draw the photo

if (card.info==deck[firstcard].info) {

Check if theres a
match

matched = true;

Increment count

count++;

ctx.fillStyle= tablecolor;

Erase area where
text will be

ctx.fillRect(10,340,900,100);

ctx.fillStyle=backcolor;

Reset to the color
for text

Write out count

ctx.fillText("Number of matches so far: "+String(count),10,360);

if (count>= .5*deck.length) {

var now = new Date();

var nt = Number(now.getTime());

var seconds = Math.floor(.5+(nt-starttime)/1000);

ctx.fillStyle= tablecolor;

Erase the whole
canvas

ctx.fillRect(0,0,900,400);

Set for drawing

ctx.fillStyle=backcolor;

out="You finished in "+String(seconds)+
" secs.";

Prepare the text

ctx.fillText(out,10,100);

Write the text

ctx.fillText("Reload the page to try again.",10,300);

Write the text

}