Canvas question

[Vinicius Carvalho]

Hi there! I'm starting with canvas, and I'm trying a simple example of
animation by moving a circle from x0,y0 to x1,y1.

My first attempt:
var canvas;
var ctx;
var x=100,y=100;
var interval;
function draw(){
canvas = document.getElementById("canvas");
if(canvas.getContext){
ctx = canvas.getContext("2d");

}

}

function animate(){
x++;
y++;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#f00";
ctx.arc(x,y,20,0,2*Math.PI,false);
ctx.fill();
if(x>400){
clearInterval(interval);
}
}

function start(){
interval = setInterval("animate()",20);
}

That makes the ball move, but it does not clear the canvas. I was
debugging and on the clearRect command it does clear the canvas, but
when painting it again, the old circles are still there.

I tried to solve by using save() and restore() and it did not work.

For some reason, beginPath() and endPath() do solve the issue. I'm
just wondering why would I need it? Why can't I just use save and
restore?

Regards

 

[Martin Honnen]

Hi there! I'm starting with canvas, and I'm trying a simple example of
animation by moving a circle from x0,y0 to x1,y1.

My first attempt:
var canvas;
var ctx;
var x=100,y=100;
var interval;
function draw(){
canvas = document.getElementById("canvas");
if(canvas.getContext){
ctx = canvas.getContext("2d");

}

}

function animate(){
x++;
y++;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#f00";
ctx.arc(x,y,20,0,2*Math.PI,false);
ctx.fill();
if(x>400){
clearInterval(interval);
}
}

function start(){
interval = setInterval("animate()",20);
}

That makes the ball move, but it does not clear the canvas. I was
debugging and on the clearRect command it does clear the canvas, but
when painting it again, the old circles are still there.

I tried to solve by using save() and restore() and it did not work.

For some reason, beginPath() and endPath() do solve the issue. I'm
just wondering why would I need it? Why can't I just use save and
restore?

Well save and restore push respectively pop some drawing state
information
(http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-state)
but the "current path and the current bitmap are not part of the drawing
state. The current path is persistent, and can only be reset using the
beginPath() method. The current bitmap is a property of the canvas, not
the context".

 

[Dr J R Stockton]

In comp.lang.javascript message <2e9ce223-7d66-448b-8b90-c4bd7cd9dab1@b8
g2000vbi.googlegroups.com>, Mon, 14 Feb 2011 08:22:06, Vinicius Carvalho

Hi there! I'm starting with canvas, and I'm trying a simple example of
animation by moving a circle from x0,y0 to x1,y1.

That makes the ball move, but it does not clear the canvas.

Too late to study that tonight, but you can (not in IE<=8) open
<http://www.merlyn.demon.co.uk/gravity5.htm>, select "Rotation", press
"Start", and see (among other things) two brown balls circling the
hollow ball. Take a copy and remove what you do not need (Attr:
Rodin?). Change all the non-brown colours in the input above to white,
to see only the balls.

I think I just draw the whole lot every time, with
RS = Rag.height = Rag.width = +Fmovie.SYZE.value // ???
clearing at least the bitmap.

On second thoughts, that's a false demonstration, since I do the
rotation with CX.rotate(Theta). But follow those instructions except
for having Exchange selected, and you see balls which really move within
fixed co-ordinates.