Mozilla canvas adding floating text

Question

Hi,

In my canvas element,i want to add a draggable text over an image.User should able to move it within the canvas area.I could add text by using some API functions, but i have no idea of movable text.Do i need to use DIV tag to contain text ?,But the problem is, finally i need to save the canvas as an image file, so ordinary DIV tag over canvas will not be saved.

I would really like to hear your comments.

Thanks,

Selvam

Answer 1

You should use the standard text drawing functions, but keep a record of the position in a variable — then when the text is dragged (which you can calculate using its size), you can draw it at the new position (calculated using the mouse coordinates).

Answer 2

Hi, thanks for your response,

But i could not understand you.How can text drawn on the canvas be moved.Isn't fixed to its position.I may use clearRect but that removes the background image as well,right?.

Can u explain it a bit more as i am just a beginner of canvas element.

Answer 3

You could use SVG and some text elements. In SVG, each element is a DOM element so you could attach mouse events to it, for instance.