HTML5 pen tool for paint application
Question
Hello I am trying to create a basic paint application in HTML5. Does anyone know how to make a pen tool for HTML5? I already know how to create the basic drawing tools just looking for some help on the pen tool. Any help would be appreciated, thanks.
Solution
I would take a look at using paper.js
OTHER TIPS
Yes, like to Pen Tool , original by Rory Duncan
var clickState = 0; // keeps track of clicks
var lastClickCoords = {}; // keeps track of position last clicked
this.tool.pen = {
"mousedown": function(e){
if (clickState === 0) {
this.disallowToolChange();
self.ctx.save();
currentLine = new Curve(this, e.offsetX, e.offsetY);
$(self.canvas).on("mousemove", callEvent);
clickState++;
}
else if (clickState === 1) {
clickState++;
currentLine.to(e.offsetX, e.offsetY)
}
else if (clickState === 2) {
clickState = 0;
currentLine.arc(e.offsetX, e.offsetY);
this.push(currentLine);
self.ctx.restore();
$(self.canvas).off("mousemove", callEvent);
this.allowToolChange();
}
},
"mousemove": function(e){
if (clickState === 1) {
currentLine.to(e.offsetX, e.offsetY)
currentLine.preview();
}
else if (clickState === 2) {
currentLine.arc(e.offsetX, e.offsetY);
currentLine.preview();
}
}
};
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow