HTML5 multiple strokes

Question

so I have finished my first ever game with HTML5... Snake! Woo Hoo! (After 4 days of work I might add).

It all works great but there is just one last thing I've been trying to fix and I just can't seem to figure out the issue.

I have a drawButton function which looks as so:

function drawButton(x,y,width,height,string,event){
    xCenterButton=x+(width/2);
    yCenterButton=y+(height/2);

    ctx.fillStyle="rgba(242,255,195,1)";
    ctx.fillRect(x,y,width,height);

    ctx.rect(x,y,width,height);
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.stroke();

    ctx.font="25px Arial";

    fontSize = getFontSize();
    centerNum = fontSize/4;

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText(string,xCenterButton,yCenterButton+centerNum);

    buttonPos.push([[x],[y],[x+width],[y+height],[event]]);
};

It draws fine when I start my main menu:

function menuStart(){
    clear();
    drawButton(getCenterX(100),getCenterY(50),100,50,"Start",0);
};

However, it creates two strokes in my post game menu, but the code is almost exactly the same:

function pgStart(){
    clear();

    ctx.font="25px Arial";
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText('GAME OVER',canvWidth/2,canvHeight/2-30);

    ctx.font="25px Arial";
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText('SCORE: '+score,canvWidth/2,canvHeight/2);

    drawButton(getCenterX(100),getCenterY(50)+35,100,50,"Re-Start",1);
};

Check out the jsFiddle: http://jsfiddle.net/cDFBj/ Play through the game and when you die, you'll see what I mean.

Cheers in advance.

Answer 1

Very peculiar problem, it seems to save the state of the first call and draw it again even though there is no command to do so...

One option would be to move the text up and use the original coordinates instead, but that just avoids the problem, not solves it. Demo for that

ctx.fillText('GAME OVER',canvWidth/2,canvHeight/2-60);
// ...
ctx.fillText('SCORE: '+score,canvWidth/2,canvHeight/2 - 30);
drawButton(getCenterX(100),getCenterY(50),100,50,"Re-Start",0);

I tried fixing the issue using ctx.save()s and ctx.restore()s, commenting out everything but the .rect line, commenting out the .rect line, and other fixes, but none seemed to work. It still remembers where the old boxes were and draws them again when it shouldn't

The only way I could come up with a fix is to use two .fillRects instead, as shown below. This doesn't increase processing much at all and takes away the unwanted magical box

function drawButton(x,y,width,height,string,event){
    xCenterButton= x + (width/2);
    yCenterButton= y + (height/2);

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.fillRect(x-1,y-1,width+2,height+2);     

    ctx.fillStyle="rgba(242,255,195,1)";
    ctx.fillRect(x,y,width,height);

    ctx.font="25px Arial";

    fontSize = getFontSize();
    centerNum = fontSize/4;

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText(string,xCenterButton,yCenterButton+centerNum);

    buttonPos.push([[x],[y],[x+width],[y+height],[event]]);
};

Demo of that here

On a side note, in case 1 under function checkGamestate(s) you should have break;, not breakl;