Easy-Brush

Easy-Brush is a JavaScript brush engine designed for drawing on HTML5 canvas elements. It offers smooth Bezier curves for a natural drawing experience.

Features

• Smooth Bezier curves
• Customizable brush color and size
• Easy integration with canvas events

Installation

Include the Easy-Brush script in your Project:

npm install easy-brush

Import the library in your JavaScript file:

import { Brush } from 'easy-brush';

Usage

const canvas = document.getElementById('yourCanvasId');
const config = {
    color: "#e00f0f",
    size: 38,
    flow: 0.7,
    opacity: 0.5,
    spacing: 0.8,
    roundness: 1.00,
    angle: 0.00,
}
const brush = new Brush(canvas, config);

let isStarted = false;

canvas.addEventListener('mousedown', (e) => {
    isStarted = true;
});

canvas.addEventListener('mousemove', (e) => {
    if (!isStarted) return
    // If a stylus device can transmit real pressure sensing data. They can usually be obtained during events (e)
    const pressure = 0.5
    brush.putPoint(e.offsetX, e.offsetY, pressure)
    brush.render()
});

canvas.addEventListener('mouseup', () => {
    isStarted = false;
    brush.finalizeStroke()
});

You can freely change the configuration to achieve different brush effects.

If there are any changes midway, please use the brush.loadConfig function to load the configuration

Template

Default effect:

Or change the spacing to become denser

Or Use Brush Image:

// If the image is in URL format, there will be a loading time
const img = "image url" | HTMLImageElement | HTMLCanvasElement
// Please use PNG image with transparent background
brush.loadImage(img, (isSuc) => {
    console.log(isSuc, "brush image load end");
})

Modules

Use Shape Dynamics

import { DynamicShapeModule } from 'easy-brush';

brush.useModule(new DynamicShapeModule({
    sizeJitter: 1,
    sizeJitterTrigger: "none",
    minDiameter: 0.5,
    angleJitter: 1,
    angleJitterTrigger: "none",
    roundJitter: 0.00,
    roundJitterTrigger: "none",
    minRoundness: 0.00,
}))

Use Transparency Dynamics

import { DynamicTransparencyModule } from 'easy-brush';

brush.useModule(new DynamicTransparencyModule({
    opacityJitter: 0.5,
    opacityJitterTrigger: "none",
    minOpacityJitter: 0.00,
    flowJitter: 0.5,
    flowJitterTrigger: "none",
    minFlowJitter: 0.00,
}))

Use Spread

import { SpreadModule } from 'easy-brush';

brush.useModule(new SpreadModule({
    spreadRange: 0.8,
    spreadTrigger: "none",
    count: 5,
    countJitter: 0.00,
    countJitterTrigger: "none",
}))

License

This project is licensed under the MIT License.