Search code examples
javascripthtml5-canvasbrushdrawingbrush

HTML5 Canvas javascript smudge brush tool

I need idea how i can make brush who can color smudge.

Example in picture: right side painting with basic brush with two different colors in left also painting but additional use smudge tool, the result should be something like left side

enter image description here

I need advice how i can try to do it

Solution

  • You will need to manipulate pixels to achieve a smudge effect.

    You can get the pixel information from the canvas using context.getImageData.

    As the user moves an imaginary brush over existing pixels, you can mimic smudging with a real brush by:

    1. Use the image data to calculate the average color the user has moved over so far.

    2. Set the fillStyle to that average color.

    3. Set the alpha of the fillStyle to a semi-transparent value (maybe 25%).

    4. As the user drags the brush, draw a series of overlapping circles over the existing pixels using the semi-transparent, color-averaged fill.

    5. If a particular client device has more processing power, you might enhance the effect with shadowing.