CODEWITHSUNDEEP
javascriptanimationhtmlcanvas
DNB5brims
DNB5brims

Reputation: 30578

Canvas Animation Kit Experiment... ...how to clear the canvas?

I can make a obj to use the canvas to draw like this:

MyObj.myDiv = new Canvas($("effectDiv"), Setting.width,  Setting.height);

Then, I use this to draw a rectangle on the canvas:

    var c =  new Rectangle(80, 80,
        {
            fill: [220, 40, 90]
        }
    );
    var move = new Timeline;
    move.addKeyframe(0,
        {
            x: 0,
            y: 0
        }
    );
    c.addTimeline(move);
    MyObj.myDiv.append(c);

But after I draw the rectangle, I want clear the canvas, but I don't know which method and how to do this... ...

O...one more thing: it is the CAKE's web site: Link

Upvotes: 4

Views: 8648

Answers (4)

Warlax
Warlax

Reputation: 2539

I found that resizing the canvas works like magic, even if you're not really changing the size:

canvas.width = canvas.width

Upvotes: 0

JayCrossler
JayCrossler

Reputation: 2129

Easiest way is:

MyObj.myDiv.width = MyObj.myDiv.width;

Upvotes: 2

DNB5brims
DNB5brims

Reputation: 30578

Clearing the canvas:

canvas.clear = true; // makes the canvas clear itself on every frame
canvas.fill = somecolor; // fills the canvas with some color on every frame
// with canvas.clear = false and low-opacity fill, fancy motion blur effect

Removing the rectangle from the canvas:
rectangle.removeSelf();
or
canvas.removeChild(rectangle);

Upvotes: 6

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

You can try this method:

MyObj.myDiv.clearRect(0, 0, canvas.width, canvas.height);

Which effectively colours the entire canvas in the background colour.

Upvotes: 3

Related Questions