sketchpad-mod

sketchpad-mod

SketchpadMod this is a simple sketchpad project for drawing, saving and recovering picture easily.

Installation

Use npm:

npm install sketchpad-mod --save

Usage

Having a canvas on the DOM:

<canvas id="sketchpad-mod"></canvas>

You should simply configure it by instantiating the SketchpadMod:

import SketchpadMod from 'sketchpad-mod';

const sketchpadMod = new SketchpadMod({
  element: '#sketchpad-mod',
  width: 400,
  height: 400
});

After that, the API provides a variety of functionalities:

// undo
sketchpadMod.undo();

// redo
sketchpadMod.redo();

// Change color
sketchpadMod.color = '#FF0000';

// Change stroke size
sketchpadMod.penSize = 10;

// Playback each sketchpad stroke (10 ms is the time between each line piece)
sketchpadMod.animate(10);

// Set size for size canvas (one size for width and height)
sketchpadMod.setCanvasSize(100);

// Set size for size canvas (one size for width and height)
sketchpadMod.readOnly = true;

// Recover sketchpad JSON or Object Settings
sketchpadMod.toJSON();
sketchpadMod.toObject();

// By recovering the sketchpad JSON or Object you can then clone the sketchpad by coding:
const settings = sketchpadMod.toObject();
settings.element = '#other-sketchpad-mod';
const otherSketchpadMod = new SketchpadMod(settings);