https://github.com/firstandthird/scribble

Javascript library for turning an element into a canvas for drawing
https://github.com/firstandthird/scribble

Last synced: 3 days ago
JSON representation

Javascript library for turning an element into a canvas for drawing

• Host: GitHub
• URL: https://github.com/firstandthird/scribble
• Owner: firstandthird
• License: mit
• Created: 2013-08-26T15:07:29.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2016-12-23T17:42:27.000Z (about 8 years ago)
• Last Synced: 2025-01-11T20:34:51.078Z (11 days ago)
• Language: JavaScript
• Size: 38.1 KB
• Stars: 2
• Watchers: 6
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#scribble

Turn a canvas element into a scribble pad that supports bouth mouse and touch.

##Installation

###Bower

`bower install scribble`

###Manual Download

- [Development]()

- [Production]()

##Usage

In order to initialize the module, you'll need to target either a `canvas` or a `div`. The module will wrap the `canvas` with a `div` or create a `canvas` inside the supplied `div`.

Finally, you need to just call `scribble` on top of the jQuery element:

	$('#myAwesomeCanvas').scribble();

	

And that's it! Well, I lied a little. You have some methods and options available!

### Available options

| Option            | Explanation                             | Default     |

| ----------------- |:---------------------------------------:|:-----------:|

| `color`           | Color in which you'll draw              | `#000000`   |

| `size`            | Size of the stroke                      | `2`         |

| `readMode`        | Sets whether the canvas is in read mode | `false`     |

| `tool`            | Selected tool at beginning              | `pencil`    |

| `stopDrawingTime` | Time to debounce stop drawing           | `500`       |

| `cssClasses`      | Object that holds css classes to style  | *See below* |

`cssClasses` have this configurable properties:

* `canvas-holder` : Class for the `div` that wraps the canvas. (*Default*: `scribble-canvas-holder`)

* `main-canvas` : Class for the main `canvas`. (*Default*: `scribble-main-canvas`)

* `shadow-canvas` : Class for the auxiliar canvas used. (*Default*: `scribble-main-canvas`)

**Note**: Aside from `cssClases`, all the options can be change with methods after initialization. 

### Available methods

Several methods are exposed through Fidel for you to use that allows you to do fancy things.

#### `changeColor(color)`

With this method you can… change the stroke color. What did you expect? There is no validation performed on plugin side so you should be sure you're passing a good value.

#### `changeSize(size)`

Changes the size of the stroke. Size has to be an integer.

#### `changeReadMode(mode)`

Changes the read mode to whatever value you pass. If you pass `true`, you'll enable read mode and `false` will disable it.

#### `undo`

This method will undo the latest drawing.

#### `redo`

This method will redo the latest undone action.

#### `clear`

This method will clear the drawing canvas.

#### `changeTool(tool)`

This method allows you to change "drawing" tool. Currently there are only two possible values. Plugin will yell if you pass something which is not implemented.

* `pencil` : This is the default value and is what you expect.

* `eraser` : This is what you expect too… It will erase as you draw.

### Fired events

#### `drawing.changed`

Whenever the user finished drawing, this event will fire. It's *debounced* so it won't fire until the time defined on the option `stopDrawingTime` passess without any more alike events.

#### Export methods

There are 2 exports methods with their counterpart that will import as well:

* `toJSON` : It returns an object literall with all the points.

* `loadJSON` : It loads that object and draws everything back.

* `toDataURL` : Converts the canvas to base64 string

* `loadDataUrl` : Loads the canvas from a base64 string

##Development

###Requirements

- node and npm

- bower `npm install -g bower`

- grunt `npm install -g grunt-cli`

###Setup

- `npm install`

- `bower install`

###Run

`grunt dev`

or for just running tests on file changes:

`grunt ci`

###Tests

`grunt mocha`