Canvas question

Discussion in 'Javascript' started by Vinicius Carvalho, Feb 14, 2011.

  1. 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
    Vinicius Carvalho, Feb 14, 2011
    #1
    1. Advertising

  2. 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/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".

    --

    Martin Honnen
    http://msmvps.com/blogs/martin_honnen/
    Martin Honnen, Feb 14, 2011
    #2
    1. Advertising

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

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Dr J R Stockton, Feb 15, 2011
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Csaba2000

    Canvas and easel question

    Csaba2000, Feb 28, 2005, in forum: HTML
    Replies:
    1
    Views:
    503
    Csaba2000
    Mar 1, 2005
  2. Gary Richardson

    Tk Canvas text question

    Gary Richardson, Aug 26, 2003, in forum: Python
    Replies:
    1
    Views:
    384
    Fredrik Lundh
    Aug 26, 2003
  3. Askari
    Replies:
    2
    Views:
    694
    Askari
    Aug 30, 2004
  4. PhilC
    Replies:
    2
    Views:
    866
    PhilC
    Oct 25, 2004
  5. Replies:
    10
    Views:
    246
    Rick Johnson
    Mar 15, 2013
Loading...

Share This Page