Question

I am trying to add multiple texts on canvas element of HTML5 using context.fillText(...), but this way it is adding only one(last as I understand).
I want to drag texts into each other and combine their content.
I know it can be done with JQuery and without canvas, but I need to do it this way.
How can I do that?

Answer 1

First off, the HTML5 Drag and Drop API is completely separate from any dragging and dropping within a Canvas. Be careful not to confuse the two.

For any sort of selecting, dragging and dropping within the canvas you will have to implement it yourself. I have a few simple tutorials on that to get you started.

You’ll also want to make rules specific to your case, which would probably be things like:

“If the object is dropped close enough to another object, combine them into one larger object that has a width equal to the larger of the two and a height equal to both of the objects combined. The object on top is the one with the smaller Y value in its top-left corner.”

Such operations shouldn’t be particularly hard to program, but you’ll have to think out all of the ramifications, and you’ll have to do it all yourself, because there’s no such API to help you there.