How to Make Canvas Text Selectable?

Question

Any suggestion is highly appreciated.

Answer 1

A simple answer would be: either use HTML or SVG instead of canvas. Unless you really need the degree of lowlevel control canvas offers.

Answer 2

canvas is just a drawing surface. You render and the result is pixels. So, you'd need to track the positions of all text you have rendered to the canvas in a some kind of data structure which you'd process during mouse events.

Answer 3

FabricJS now has the ability to interact with objects outside the canvas element - eg this demo shows a button that is linked to an image loaded in a canvas element.

The same approach can be used in other libs such as Raphael by hooking any move event, getting the bounding box of the element and re-positioning the HTML element.