Canvas question


V

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
 
Ad

Advertisements

M

Martin Honnen

Vinicius said:
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".
 
Ad

Advertisements

D

Dr J R Stockton

In comp.lang.javascript message <[email protected]
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top