Installation
Download the zip file and place it in your project's folder, or you can use git clone
instead of manual download. After you complete one of those steps, just import the paint.js file. Don't forget that paint.js requires jQuery.js and JSColor.js
<script type="text/javascript" src="paint.js/src/jscolor.js"></script>
<script type="text/javascript" src="paint.js/src/jquery.js"></script>
<script type="text/javascript" src="paint.js/src/paint.js"></script>
Usage
After you import the library, you can create a <div>
element and use PaintJS object to initialize inside that div.
<div id="paint"></div>
...
<script type="text/javascript">
var paint = new PaintJS({
paint: "#paint" // or document.getElementById("paint")
});
</script>
After user is done drawing, you can extract base64 contents using
completeButton.onclick = function() {
var base64 = paint.canvas.toDataURL();
// $.ajax(...) upload using the base64 content
}
Customization
you can initialize PaintJS object with custom options
var paint = new PaintJS({
paint: "#paint", // required key
brushSize: 35, // 8 is default
brushColor: "#ff0000", // hexadecimal value, default #000
paletteColors: [ // array of color shortcut, so that user does not have to use colorpicker for everything
"#ffffff",
"#000000",
"#808080"
]
});
Drawing on Images
you can initialize PaintJS to load from URL
var paint = new PaintJS({
paint: "#paint"
});
paint.fromURL("test.jpg").then(function(paintJS) {
// act on paintJS
}).catch(function(err) {
// probably link is invalid
console.log(err);
});
Creating brushes
var brush = new PaintJSBrush({
icon: "icons/brush.png", // icon to display in brushes section, required
brushIcon: "icons/circle.png", // icon which will be displayed while mouse has entered the canvas
mousedown: function(e) { // optional. event is fired on canvas mousedown
var x = e.x;
var y = e.y;
var paintJS = this.paintJS; // referrence to PaintJS object
var canvas = paintJS.canvas;
var ctx = paintJS.ctx;
var size = paintJS.brushSize;
var color = paintJS.brushColor;
...
}
});
var paint = new PaintJS({
paint: "#paint",
brush: brush // this will add this brush to initial brushes, and set it as active
});
Creating Shortcuts
paintJS.registerShortcut("CMD+SHIFT+A", function() {
// do stuff
});
// deleting shortcut
paintJS.deleteShortcut("CMD+SHIFT+A");
It does not matter whether you write CMD+SHIFT+A
or A+CMD+SHIFT
, it will still work.
Todo
- Add support for transparency
- Add support for setting brushes and colors instead of only adding them
- Make selecting tool
- Undo and Redo