Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Canvas question

Reply
Thread Tools

Canvas question

 
 
Vinicius Carvalho
Guest
Posts: n/a
 
      02-14-2011
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
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      02-14-2011
Vinicius Carvalho wrote:
> 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...e-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".

--

Martin Honnen
http://msmvps.com/blogs/martin_honnen/
 
Reply With Quote
 
 
 
 
Dr J R Stockton
Guest
Posts: n/a
 
      02-15-2011
In comp.lang.javascript message <2e9ce223-7d66-448b-8b90-c4bd7cd9dab1@b8
g2000vbi.googlegroups.com>, Mon, 14 Feb 2011 08:22:06, Vinicius Carvalho
<(E-Mail Removed)> posted:

>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<= 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.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to couper contenier of a canvas in an outer canvas??? olsr.kamal@gmail.com Python 10 03-15-2013 08:46 PM
Canvas and easel question Csaba2000 HTML 1 03-01-2005 03:18 PM
Canvas with scrollbars - how to get correct canvas coordinate when the scroll bars have moved? PhilC Python 2 10-25-2004 11:57 AM
Canvas scrolling - scrollBar become "disabled" on change in canvas Askari Python 2 08-30-2004 02:56 PM
Tk Canvas text question Gary Richardson Python 1 08-26-2003 08:01 AM



Advertisments