simple-painter

JavaScript painting plugin in a browser. Simple Painter based on HTML5/Canvas.

Installing

$ npm install simple-painter

Example

Please refer to the example/index.ts file.

• https://goldenthumb.github.io/simple-painter

$ git clone https://github.com/goldenthumb/simple-painter.git
$ cd simple-painter
$ npm install
$ npm run start

Now open this URL in your browser: http://localhost:1234/

API

new SimplePainter(options)

Create instance.

import SimplePainter from 'simple-painter';

const painter = new SimplePainter({ canvas });

options

{   
    canvas,             // HTMLCanvasElement.
    width,              // Canvas width.
    height,             // Canvas height.
    drawMouse: true,    // allow draw by mouse or touch. Default is true
    type: 'freeLine',   // draw type. Default is 'freeLine'
    color: 'red',       // draw color. Default is 'red'
    thickness: 3,       // draw thickness. Default is 3
    lineCap: 'square',  // draw lineCap. Default is 'square'
    figures: [],        // figure data
}

painter.setOptions(options)

Change draw option. (by mouse or touch)

painter.setOptions({
    type: 'rectangle',
    color: 'blue',
    thickness: 10,
    lineCap: 'round',
})

painter.setSize(size)

Change canvas size.

painter.setSize({
    width: 500,
    height: 500,
})

painter.draw(Figure)

Add draw figure and render.

painter.draw({
    drawOption: {
        type: 'freeLine',
        color: 'red',
        thickness: 3,
        lineCap: 'round',
    },
    positions: [
        { x: 0.537866461275263, y: 0.24183928841850494 },
        { x: 0.655767612752637, y: 0.14106861275263723 },
        { x: 0.654859612752637, y: 0.14429961275263721 },
        { x: 0.640327612752637, y: 0.19599561275263723 },
        { x: 0.638516127526372, y: 0.20245761275263723 },
    ]
});

painter.draw({
    drawOption: {
        type: 'ellipse',
        color: 'green',
        thickness: 2,
        lineCap: 'round'
    },
    positions: [
        { x: 0.589660464410864, y: 0.39722129782530574 }, 
        { x: 0.8147651703463574, y: 0.5984210792366761 }
    ]
});

painter.draw({
    drawOption: {
        type: 'rectangle',
        color: 'blue',
        thickness: 10,
        lineCap: 'square',
    },
    positions: [
        { x: 0.45800570994602724, y: 0.29400569993626097 }, 
        { x: 0.6980057245944656, y: 0.46000571006809754 }
    ]
});

painter.draw({
    drawOption: {
        type: 'arrow',
        color: 'orange',
        thickness: 5,
        lineCap: 'square',
    },
    positions: [
        { x: 0.6147651703463574, y: 0.6984210792366761 },
        { x: 0.789660464410864, y: 0.29722129782530574 }
    ]
});

painter.draw({
    drawOption: {
        type: 'straightLine',
        color: 'purple',
        thickness: 5,
        lineCap: 'round',
    },
    positions: [
        { x: 0.589660464410864, y: 0.39722129782530574 },
        { x: 0.8147651703463574, y: 0.5984210792366761 }
    ]
});

painter.redraw()

redraw.

painter.redraw();

painter.setFigures(figures)

Set Figures.

painter.setFigures(figures);

painter.undo()

Undo draw.

painter.undo();

painter.redo()

Redo draw.

painter.redo();

painter.clear()

Clear draw.

painter.clear();

painter.allOff()

remove all events.

painter.allOff();

painter.destroy()

destroy.

painter.destroy();

painter.on(eventName, listener)

Add an event listener. Returns Function to remove the event listener.

Events

• drawStart - Event occurs when drawing starts.
• drawing - Event occurs when drawing.
• drawEnd - Event occurs when drawing is finished.

/**
 * @param {object} data
 * @param {HTMLCanvasElement} data.canvas
 * @param {MouseEvent | TouchEvent} data.origin
 * @param {{x: number, y: number}} data.relativePosition
 */
painter.on('drawStart', (data) => {
    console.log(data);
});

painter.on('drawing', (data) => {
    console.log(data);
});

painter.on('drawEnd',(data) => {
    console.log(data);
});

• figures - Event occurs when change figure.

painter.on('figures', (data) => {
    console.log(data);
});

License

MIT