/brushstroke

Draw creative brushstrokes directly in the browser with a nice API. Be able to draw solid colors, images, or even HTML!

Primary LanguageJavaScriptMIT LicenseMIT

Brushstroke

Brushstrokes on the web: draw solid colors, images, or even HTML!

DEMO

TUTORIAL

Usage

The brushstroke library has no mandatory dependencies, but:

  • It uses promises, so if you want to support IE or any other browser that does not support native promises, you need a polyfill. This is a tiny one :)
  • To draw HTML, it uses rasterizeHTML.js.

So, include the brushstroke script (and dependencies mentioned above, if you need them) and start drawing things:

<!-- Optional dependencies goes here -->
<script src="dist/brushstroke.min.js"></script>
<script>
    // Options for customization, see full list below
    var options = {
        duration: 1,
        queue: true
    };

    // Initialization
    var bs = new Brushstroke(options);

    // Draw, erase, etc...
    bs.draw();
    bs.erase();
    bs.draw();
</script>

Options

For customization, you can pass options (in object notation) to Brushstroke constructor. These options overrides defaults, and will be used for any operation (draw, erase, etc.). You can also override options for an specific operation. Here is the complete list, for reference:

Name Type Default Description
animation String 'to-bottom' Type of animation. Possible values are: to-bottom, to-top, to-right, to-left, path, points. See details below.
path String or DOM Element undefined Path element (or d attribute as String) to perform a path animation.
points Array or Integer undefined Array of points (or a number indicating the amount of random points to generate an Array) to perform a points animation.
frameAnimation Boolean false If true, the animation will be frame-based instead time-based. This could be better to get a consistent drawing, but it can affect performance.
frames Integer 0 Number of frames to perform a frame-based animation. If frameAnimation is false and you define frames > 0, there will be no animation, but drawing will be calculated and showed ASAP, using the number of frames defined.
duration Float 0 Duration (in seconds) to perform a time-based animation. If frameAnimation is true and frames is not defined, duration will be translated to frames, considering 1 second = 60 frames.
delay Float 0 Delay (in seconds) to begin the animation.
color String '#ccc' Valid color value to be used in drawing.
width Float 300 Width (in pixels) for the canvas.
height Float 120 Height (in pixels) for the canvas.
size Float 40 Size of the brush.
inkAmount Float 1 Amount of "ink" used. Higher values results in stronger drawings.
lifting Boolean false Determines if basic animations (to-bottom, to-top, to-right, to-left) must be performed without lifting the brush (continuous drawing), or as several separate drawings (straight lines).
dripping Boolean false Determines if it should drips in case there is to much ink.
splashing Boolean true Determines if the brush should splash in case of fast draw.
padding Float 30 Separation between border and drawing for basic animations (to-bottom, to-top, to-right, to-left).
overlap Float 10 Overlap among lines for basic animations (to-bottom, to-top, to-right, to-left).
tension Float 0.5 Used in points and basic animations (to-bottom, to-top, to-right, to-left) to customize curvature. Typically between [0.0, 1.0] but can be exceeded.
reduceOverflow Integer 20 This value decreases the overflow in generated curves for basic animations (to-bottom, to-top, to-right, to-left).
root String or DOM Element body DOM Element (or String selector to get it) to append canvas.
el String or DOM Element undefined DOM Element (or String selector to get it) to rasterize as image to draw. This require rasterizeHTML.js.
image String undefined Image src to draw.
repeat String 'no-repeat' Indicates how to repeat the image. Possible values are: no-repeat, repeat, repeat-x, repeat-y.
stretch Boolean true Indicates if the image should be stretched in canvas.
queue Boolean false Indicates if animations should be queued.

Possible animation values

These are all the possible animation values:

  • Basic animations (to-bottom, to-top, to-right, to-left): This will perform the drawing in te specified direction.
  • Path animations (path): This will perform the drawing using a SVG path as reference. You must defined the path option to specify the path element (or d attribute as String).
  • Points animations (points): This will perform the drawing using a curve generated from an Array of points in format [x1, y1, x2, y2, ...]. You must defined the points option to specify the Array of points (or a number indicating the amount of random points to generate an Array).

Operations

These are all the possible operations can be performed with a Brushstroke instance:

  • draw(options): Draw using the specified configuration.
  • erase(options): Like draw, but instead it erase the canvas.
  • fill(options): Fill the canvas with defined el (HTML) or image with no animation.
  • clear(): Clear the canvas with no animation.