Javascript Canvas clear/ redraw

Question

I\'ve tried googling the answer to this but i\'m just going around in circles.... If I clear the rect (using clearRect) then the image doesn\'t redraw after. However, if I d

Answer 1

Canvas workflow goes like this:

1. Draw some things on the canvas.
2. Calculate changes to the position of those things.
3. Clear the canvas.
4. Redraw all the things in their new positions.

Canvas does not "remember" where it drew your things so you cannot directly order your things to move.

But you can save the definition of your things in javascript object:

var myCircle={
    centerX:50,
    centerY:50,
    radius:25,
    fill:'blue'
}

Then you can "move" your things using the javascript objects:

myCircle.centerX += 5;

And then redraw the things at their new positions. Putting the redraw code in a function makes redrawing easier:

function redraw(){

    // clear the canvas
    ctx.clearRect(0,0,canvas.width,canvas.height);

    // redraw one or more things based on their javascript objects
    ctx.beginPath();
    ctx.arc( myCircle.centerX, myCircle.centerY, myCircle.radius, 0, Math.PI*2 );
    ctx.closePath();
    ctx.fillStyle=myCircle.fill;
    ctx.fill();
}

Putting it all together:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var myCircle={
  centerX:50,
  centerY:50,
  radius:25,
  fill:'blue'
}

redraw();

document.getElementById('move').addEventListener('click',function(){
  myCircle.centerX+=5;
  redraw();
});

function redraw(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc( myCircle.centerX, myCircle.centerY, myCircle.radius, 0, Math.PI*2 );
  ctx.closePath();
  ctx.fillStyle=myCircle.fill;
  ctx.fill();
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

Move