My HTML5 canvas isn't clearing - no paths are involved

Question

I've run into an issue with a game I am developing where a canvas is not clearing, although the function is being called to clear that specific context.

I am moving an object from left to right, and to do so I run this code:

onKeyboardKeyDown(){
    canUpdateBack = true;
    drawX++;
}

onKeyboardKeyUp(){
    canUpdateBack = false;
}

if (canUpdateBack) {
    console.log("CLEARING contextBack");
    contextBack.clearRect(0, 0, canvasBack.width, canvasBack.height);
    contextBack.drawImage(img, drawX, 0, img.naturalWidth, img.naturalHeight);
}

I have tried this with hard-coded numbers for the width and height of the canvas and get the same result.

I know this works because I can see the boxObj moving across the canvas when I press a key, canUpdateBack is set to true. It is only set to false on a "keyup" event so that I only clear / draw on the canvas whilst moving boxObj.

I am getting the "CLEARING contextBack" console log, so I know the correct context is being passed. However, the context simply isn't clearing.

Thanks to anyone that could provide or point me toward a solution.

I am NOT using any transforms, I believe. I am drawing my images at an X-coordinate updated by my key presses. Or are those still considered transforms, me saying "paint over there"?

I discovered the bug in Chrome but am unable to replicate on mobile, Safari, or Firefox. It's looking entirely possible it's a Chrome bug.

Answer 1

From your given Fiddle in the comments, it looks like the problem is you are not clearing the contextBug canvas and just clearing the backCanvas . Make sure you clear both of them (or either or depending on how your program works):

function update() { 

    contextBack.clearRect(0, 0, canvasBack.width, canvasBack.height);
    contextBug.clearRect(0, 0, canvasBug.width, canvasBug.height);    
    moveObj(boxItem);
    ...
}

Fiddle Example