⚠️ This project is not under active development! PRs welcome!
Angular.js directive to paint on a canvas on desktop or touch devices
bower install angular-canvas-painter
pw.canvas-painteras an angular module dependency.
- Use the
pw-canvasdirective in your template to create the painting canvas.
- Optionally you can use the
pw-color-selectordirective to choose colors from.
width: 400 //pxheight: 300 //pxbackgroundColor: '#fff'color: '#000'lineWidth: 1 //pxopacity: 09 //0-1undo: false // boolean or a number of versions to keep in memoryimageSrc: 'images/example.jpg' // loads the specified image and sets it as background image,customCanvasId: 'myCustomId' // define a custom value for the id attribute of the canvas element (default: 'pwCanvasMain')
To enable the undo function set
undo: true in the options and provide a
The version attribute will always be set to the amount of available versions in memory. To undo a stroke just decrease the version number in your surrounding controller e.g.
model.version = model.version - 1. To jump back 3 versions set
model.version = model.version - 3.
You can set a maximum number of saved versions to prevent too much memory consumption by setting a number instead of
true in the options, e.g.
pwCanvas set the color option in
pwCanvas to the color variable of the selecot:
The drawing algorithm to produce clear and smooth edges is based on a great article by Rishabh