Mozilla canvas adding floating text

Question

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.

score 1 · Answer 1 · answered Jul 25 '09 at 20:36

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

answered Jul 25 '09 at 20:36

jtbandes

115,675
35
233
266

1

And of course the area where the old text was will need to be redrawn – olliej Jul 25 '09 at 21:10

score 0 · Answer 2 · answered Oct 16 '09 at 12:39

0

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.

answered Oct 16 '09 at 12:39

codedread

1,312
11
18

Mozilla canvas adding floating text

2 Answers2