Search code examples
htmlcanvasbrush

HTML5 javascript paint brushes

Hello maybe anyone know where i can found nice and smooth HTML5 brushes like a http://muro.deviantart.com/ i try to find in but all brushes only in photoshop or desktop applications.

Solution

  • It looks like your link is drawing a smooth line by:

    1. Gathering all the raw coordinates coming from mousemove.

    2. Applying a line simplification algorithm to remove excess coordinates that cause small unappealing angle bends in the line.

    Here's a nice tutorial of line simplification by Mike Bostock (creator of the awesome D3 data visualization library).

    http://bost.ocks.org/mike/simplify/

    Also, here are some nice brush styles created by Kangax (who is also the author of FabricJS--an excellent canvas drawing library):

    http://perfectionkills.com/exploring-canvas-drawing-techniques/