Dropmarker.js adds very basic drawing capabilities in the browser. See demo.html
for a very basic example.
Dropmarker(htmlElement, backgroundSrc, readOnly)
: Creates a new Dropmarker instance, which creates a <canvas>
element within the HTML element you passthrough.
Example:
var wrap = document.querySelector('.canvas-wrap');
var DR = new Dropmarker(wrap, 'http://crossorigin.example.com/image.png');
destroy
: Removes the canvas from the DOM and removes any event listenersexportCanvas(kind, onlyDrawing)
: Exports canvas as a string. Valid kinds are:json
,svg
, andimage
(base64, default). Passing intrue
as the second parameter will exclude the background image from the export (only with JSON and SVG).importDrawing(svg)
: Imports an SVG element (or URL) into the drawing layer of the canvasisEmpty
: Returnstrue
if the user has drawn on the canvas, otherwisefalse
.resetCanvas
: Clears the canvas to its blank statesetBackground(backgroundSrc)
: Changes the backgroundsetColor(val)
: Sets the color for new paths. Can be any valid CSS color value.setTool(name)
: Changes the active tool. Valid names are:arrow
(default),brush
,highlighter
, andselect
npm install
Then run gulp
to bundle and minify.