clearRect() not working in html5 canvas

Question

I wrote a function whose purpose is to re-draw a square line block (which cover whole page) every time when the window size is changed.

http://jsfiddle.net/9hVnZ/

The problem is that

bgCtx.clearRect(0, 0, bgCtx.width, bgCtx.height);

didn't work for me: As my Chrome browser size changed, the previous red lines does not clear as I thought.

reproduced screenshot: http://i.imgur.com/6aePMLm.png

I tried browse other answered questions, some of their cases are missing bgCtx.beginPath(); but I did include it, and bgCtx.width = bgCtx.width; doesn't work, either, am I missing something or anything wrong?

Any suggestion would be appreciated :)

Answer 1

You're creating a new canvas element on every draw() . Fiddle