Why flickering rectangle (drown by canvas) doesn't work?

Question

I just started to learn a little bit about canvas!

I want to draw rectangle that flickers (shows/hides/shows/hides/shows...) after set time interval.

If I remove setInterval() and clear_canvas() - rectangle is drown. Problem seems to be in clear_canvas(). I got that code from here.

At the moment it just shows blank page. In my opinion, it should draw, clear, draw, clear...

I addedconsole.log() for debugging; it's called! No errors or whatever are thrown in Chrome 14 (on Fedora 15, if that matters). Everything seems to be okay; unfortunately, it isn't!

I putted code on JsFiddle so you, guys, can help me out. Thanks!

score 3 · Accepted Answer · answered Dec 13 '11 at 18:11

3

Your problem is is that it is clearing the rectangle the moment it is drawn.

You'll need to make the function alternate between drawing and clearing in order to notice anything.

var draw = false;
$(function() {

    setInterval(function() {

        console.log('called');
        if(draw)
                draw_rectange();
        else
                clear_canvas();

        draw = !draw;

    }, 1000);

});

answered Dec 13 '11 at 18:11

Jeffrey Sweeney

5,986
5
24
32

Shame on me for not understanding this myself. :( – daGrevis Dec 14 '11 at 08:21
1

You aren't the first one... how do you think I knew that was the problem? :P – Jeffrey Sweeney Dec 14 '11 at 14:28

score 0 · Answer 2 · answered Jul 24 '13 at 19:18

0

Hate to do this guys but its a simple matter of order of operations. clear the canvas before you draw to it, not after.

switch

draw_rectange();
clear_canvas();

to

clear_canvas();
draw_rectange();

result: http://jsfiddle.net/pYve5/4/

answered Jul 24 '13 at 19:18

ericjbasti

2,085
17
19

Why flickering rectangle (drown by canvas) doesn't work?

2 Answers2