Moving Objects on html5 Canvas

Question

I placed an text on html5 canvas object using fillText option, question is I need to move the text position or change the color of the text that is already rendered.

Shortly I need to know how to Manipulate particular child of canvas element

Answer 1

I've never tried it but I think this would be the way to do it.

var canvas = document.getElementById("canvas"); //get the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
var c = {  //create an object to draw
  x:0,  //x value
  y:0,  //y value
  r:5; //radius
}
var redraw = function(){  // this function redraws the c object every frame (FPS)
  ctx.clearRect(0, 0, canvas.width, canvas.height); // clear the canvas
  ctx.beginPath();  //start the path
  ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); //draw the circle
  ctx.closePath(); //close the circle path
  ctx.fill(); //fill the circle
  requestAnimationFrame(redraw);//schedule this function to be run on the next frame
}
function move(){  // this function modifies the object
  var decimal = Math.random() // this returns a float between 0.0 and 1.0
  c.x = decimal * canvas.width; // mulitple the random decimal by the canvas width and height to get a random pixel in the canvas;
  c.y = decimal * canvas.height;
}
redraw(); //start the animation
setInterval(move, 1000); // run the move function every second (1000 milliseconds)

Here is a fiddle for it. http://jsfiddle.net/r4JPG/2/

If you want easing and translations, change the move method accordingly.

Answer 2

I think there is no object model behind the canvas, so you cannot access a "child object" like a "text object" and change it. What you can do is that you draw the text again with a different color that overwrites the "pixels" of the canvas. If you want to move the text, first you have to either clear the canvas or re-draw the text with a background/transparent color to get rid of the text in the previous position. Then you can draw the text in the new position.