Kineticjs - Draw Free With Mouse

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 Kinet

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