KineticJS - Draw free with mouse

Question

I'm building a canvas paint tool where the use simply drags his mouse to draw on the canvas. As I understand it lines is the best way for the job. So on mouse down I create a KineticJS Line object and when the user drags I add a point between the last mouse position and the current. Note, I only have one line object that has multiple points.

When the user releases his mouse the Line is finished and whenever you click again to draw more, I create a new line object.

Problem with this is that if you are going to draw a text, say "My name is x" That would result in many line objects, 1 for each character (and 2 for "x" and "i").

Is there a better way to do this? My idea was to have only one line object, and onmousedown you simply not add a line from the previous position, and then when u drag you do. But I don't think KineticJS Line supports that.

So basically, can I improve the way I let the user draw?

Answer 1

Your current design of having 1-2 polylines that define one letter is fine.

Both canvas and Kinetic can support a whole paragraph of characters before lagging in performance.

If you want 1 single definition for a whole sentence, you can use a custom Kinetic.Shape.

With Shape, you get full access to a wrapped canvas context. You could use that context to do your second idea--a single context.path drawing a sentence through a saved set of moveTo and lineTo commands.

Personally I would go with your current design (1-2 polylines per character) because the performance is fine and you get more flexibility. (For example, if you want to draw the person's name in a different color is easier in your current design).