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.

score 0 · Accepted Answer · answered Jun 05 '12 at 18:08

0

I would take a look at using paper.js

http://paperjs.org/

answered Jun 05 '12 at 18:08

Trav McKinney

988
8
24

score 0 · Answer 2 · edited Nov 14 '18 at 00:21

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();

    }
  }
};

HTML5 pen tool for paint application

2 Answers2