jqScribble
jqScribble is a jquery plugin that will allow you to draw on an HTML5 canvas element. It works with standard mouse input and also touch input. It is designed to be extremely extensible, allowing for custom brushes and image saving. I have also provided with this plugin a sample PHP file that will demonstrate turning drawn images into actual images.
Usage
To use the jqScribble plugin first select a jquery element to attach to scribble canvas to. Then specify any options you wish.
$('#test').jqScribble(options);
Available Options
width
(int) The width of the Canvas element if not specified then the width of the parent is used- DEFAULT - 300
height
(int) The height of the Canvas element if not specified then the height of the parent is used.- DEFAULT - 250
backgroundImage
(string) An image to add to the background of the canvas.- DEFAULT - false
backgroundImageX
(int) The X offset in the canvas to put the specified background image- DEFAULT - 0
backgroundImageY
(int) The Y offset in the canvas to put the specified background image- DEFAULT - 0
backgroundColor
(string) The hex color value to set the background as.- DEFAULT - #ffffff
saveMimeType
(string) If the image is saved the mime type that will be used.- DEFAULT - image/png
saveFunction
(function) The function to use when saving the drawing.- DEFAULT - BasicCanvasSave
brush
(jqScribbleBrush) The brush to used when drawing on the Canvas.- DEFAULT - BasicBrush
brushSize
(int) The size of the brush that is used.- DEFAULT - 2
brushColor
(string) The color of the brush stroke.- DEFAULT - #000
fillOnClear
(bool) Controls whether or not the canvas will be filled with color upon execution of clear().- DEFAULT - true
Exposed Attributes
You can access the canvas DOM element of a jqScribble instance by calling
$('...').data('jqScribble').canvas
You can check if the jqScribble instance has been drawn on by checking
$('...').data('jqScribble').blank
To get the brush object that jqScribble is currently using
$('...').data('jqScribble').brush
Creating New Brushes
New brushes should inherit from the jqScribbleBrush object as follows:
NewBrush.prototype = new jqScribbleBrush. NewBrush(){...}
They should also implement the following methods:
strokeBegin(x, y) strokeMove(x, y)
and can optionally implement
strokeEnd()
Image Saving
A save function will be passed the image data of the canvas, provided the canvas is not empty.
function mySave(imageData)
The specified save function will not be called until the canvas is not empty and you call the jqScribble save function.
$('...').data('jqScribble').save()
You can also specify a save function at the time of saving by calling save with a function parameter.
$('...').data('jqScribble').save(function(imageData){...});
The save method is chainable with other jqScribble methods.
Updating jqScribble Options
Updates can be passed to the jqScribble instance by calling
$('...').data('jqScribble').update(options)
Where options are any of the original options specified above. The update method is chainable with other jqScribble methods.
Clearing The Canvas
To reset the canvas call
$('...').data('jqScribble').clear()
The clear method is chainable with other jqScribble methods.