jSketch

Overview

A lightweight JavaScript library for drawing facilities on an HTML5 canvas.
Conveniently wrapped in a Sketchable class. Available also as a jQuery plugin.

Demos

• The basics
• Interactivity
• Disabling multitouch
• Drawing modes
• Adding some controls
• Tracking penup strokes
• Multiple instances
• Drawing API
• Animation ← new!
• Serialization ← new!
• SVG export ← new!
• Size/resizing ← new!
• Changing strokes ← new!
• Changing drawing options ← new!

Documentation

• Online document

Repository

Grab the latest code at github.

Download

Production files aka Minified code

• Base lib ← drawing only, required
  • jsketch.min.js (5.2 kB)
• Interactive ← you want this!
  • sketchable.min.js (5.5 kB)
  • jquery.sketchable.min.js (5.6 kB)
• Memento plugin ← undo/redo facilities
  • sketchable.memento.min.js (1.8 kB)
  • jquery.sketchable.memento.min.js (1.8 kB)
• Animate plugin
  • sketchable.animate.min.js (1.4 kB)
  • jquery.sketchable.animate.min.js (1.4 kB)
• Serializer plugin
  • sketchable.serializer.min.js (601 B)
  • jquery.sketchable.serializer.min.js (606 B)
• SVG export plugin
  • sketchable.svg.min.js (365 B)
  • jquery.sketchable.svg.min.js (387 B)
• All in one ← base + interactive + plugins (memento, animate, serializer, svg export)
  • sketchable.full.min.js (15.7 kB)
  • jquery.sketchable.full.min.js (14.9 kB)

Source files aka Fully documented code

• Base lib ← drawing only, required
  • jsketch.js (16.3 kB)
• Interactive ← you want this!
  • sketchable.js (22.8 kB)
  • jquery.sketchable.js (22.9 kB)
• Memento plugin ← undo/redo facilities
  • sketchable.memento.js (8.8 kB)
  • jquery.sketchable.memento.js (8.9 kB)
• Animate plugin
  • sketchable.animate.js (5.3 kB)
  • jquery.sketchable.animate.js (5.3 kB)
• Serializer plugin
  • sketchable.serializer.js (2.6 kB)
  • jquery.sketchable.serializer.js (2.5 kB)
• SVG export plugin
  • sketchable.svg.js (1.8 kB)
  • jquery.sketchable.svg.js (1.7 kB)