How do you clear canvases in javascript?

Question

Hello, I have been creating a green screen algorithm on code pen which I have put a link to above. Most of it seems to be working except from the JavaScript that is supposed to clear the canvases. I think it will probably be something quite simple but I can't work it out. I put the code that I think is what doesn't work below. Thank you

function clear() {
    var fgCanvas = document.getElementById("can1");
    var bgCanvas = document.getElementById("can2");
    var fgContext = fgCanvas.getContext("2d");
    var bgContext = bgCanvas.getContext("2d");
    fgContext.clearRect(0, 0, fgCanvas.width, fgCanvas.height);
    bgContext.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
}

Possible duplicate of [How to clear the canvas for redrawing](https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) — George, Apr 16 '19 at 09:10

score 0 · Accepted Answer · answered Apr 16 '19 at 09:15

0

It seems that Javascript doesn't like the function name you're using - clear() - thus the function won't ever be called. Try renaming the function to clearIt() or something like that. Apart from that your code for cleaning the canvases is correct.

answered Apr 16 '19 at 09:15

obscure

11,916
2
17
36

Hello, I have now tried this but it still doesn't want to work. Do you think it could be anything else ? – mabski Apr 16 '19 at 09:30
I'm afraid renaming your function to canvas() doesn't help either. ;) As I suggested try renaming it to clearIt(). By the way, I just noticed there's a typo in your code now: `fgContext.clearRect(0, 0, fgcanvas.width, fgCanvas.Height);` Javascript is case-sensitive so fgcanvas isn't correct - make it fgCanvas – obscure Apr 16 '19 at 09:31

score 0 · Answer 2 · answered Apr 16 '19 at 09:35

Type clear in your console:

clear
ƒ clear() { [Command Line API] }

clear function is basically for clearing console terminal as far as I know, so just rename it or create an object and declare clear method as a property instead of declaring it for window object.

How do you clear canvases in javascript?

2 Answers2