whimsicaldreamer / scribbly

A simple javascript and HTML5 drawing plugin

Scribbly

Simple Usage

• Declare the HTML5 canvas element as:
  <canvas id="drawingBoard" width="700" height="400"></canvas>

• Import scribbly.js as <script src="scribbly.js"></script>

• Import scribbly.css as <link rel="stylesheet" href="scribbly.css"> if toolbar is not set to false

• Then initialize your script with the HTML5 canvas element:

   var scribble = new Scribbly({     
       canvas: 'drawingBoard',
   });  
  

Options

Options	Default	Description
canvas	null	Identify your drawing board. Required
canvasBg	#FFFFFF	Background colour for the drawing canvas
lineThickness	2	Stroke width
lineColor	#000000	Stroke colour
toolbar	true	Show/ Hide the toolbar

Functions

Function	Description
clear()	Clears the whole canvas
save(filename)	Saves the canvas and downloads the image. Parameter filename is optional
setTool(tool, size, color)	Tools available are : clear, eraser, marker. Parameter size sets the stroke size

scribbly's Issues

Stroke dot not occuring on single tap in touch devices

The scenario is that when trying to draw on touch devices rather than using touch emulation in browsers. When drawing if a user taps on the canvas only once, no stroke dot appears on the canvas. Except that when user drags to draw everything goes fine. In desktop browsers emulating touch doesn't cause this issue.