clearInterval won't stop setInterval

Question

I have this piece of game for a bricks game in javascript. The thing is that my clearInterval function doesn't want to stop even if it's globally declared. I added here my draw function which renders the canvas each time when that setInterval is called.

initbricks();
draw();
init_mouse();
var i = setInterval(draw,100);  

function play(){    
    document.getElementById("play").disabled = true;
}     

function reset(){
    clear();
    clearInterval(i);
}

//Initialize game
function init() {
    document.getElementById("play").addEventListener("click", play);
    document.getElementById("reset").addEventListener("click", reset);
}

//Load canvas after window has loaded
if (document.getElementById) window.onload=init;

function draw() {
    clear();
    circle(ballX,ballY,radius);  
    rect(paddlex, height-paddleh, paddlew, paddleh);

    //draw bricks
    for (i=0; i < NROWS; i++) {
        ctx.fillStyle = rowcolors[i];  
        for (j=0; j < NCOLS; j++) {
            if (bricks[i][j] == 1) {
                rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
                     (i * (BRICKHEIGHT + PADDING)) + PADDING,
                     BRICKWIDTH, BRICKHEIGHT);
            }
        }
    }

    // hit brick?
    rowheight = BRICKHEIGHT + PADDING;
    colwidth = BRICKWIDTH + PADDING;
    row = Math.floor(ballY/rowheight);
    col = Math.floor(ballX/colwidth);
    // if so, reverse the ball and mark the brick as broken
    if (ballY<NROWS*rowheight && row>=0 && col>=0 && bricks[row][col]==1) {
        dy = -dy;
        bricks[row][col] = 0;
    }

    // if game not over, move paddle
    if (ballY+dy<height)
        if (rightDown && paddlex+paddlew<width)
            paddlex += 5;
        else if (leftDown && paddlex>0)
            paddlex -= 5;

    // Right/Left stop condition
    if (ballX+dx>width-5 || ballX+dx<5)
        dx= -dx;

    // Up stop condition
    if (ballY+dy<5)
        dy= -dy;

    // Down stop condition
    else 
        //i f ball is on the paddle
        if (ballY+dy>height-20 && ballX>paddlex && ballX<paddlex+paddlew) 
            dy= -dy;

    // if ball is not on the paddle
    else if (ballY+dy>height+20){
        // game over, so stop the animation
        clearInterval(i);
    }                                                 
    ballX += dx;
    ballY += dy;
}

Answer 1

You've got multiple variables called i , and the one in the draw function hasn't been given a var declaration specifier so it's overwriting your timer variable.

In any event (pun not intended) you should investigate window.requestAnimationFrame to handle your screen refreshes, and not use timers at all. It'll make your game animation much smoother.

Answer 2

for (i=0; i < NROWS; i++) {

it seems that variable i has been replaced by the for loop.

Rename your interval variable name