/canvas-realistic-pen

Library for smooth pen-like signatures drawing on canvas

Primary LanguageJavaScript

canvas-realistic-pen

Library for smooth pen-like drawing on canvas written in vanilla JavaScript

Demo

This is refactored and enhanced version of code taken from this post: http://stackoverflow.com/a/10661872/2248909

Installation

bower install canvas-realistic-pen --save

Authors:

Options:

  • penColor - Color of the pen. Allowed formats: Array - [0, 0, 0], Hex - #ccc, #cfc4c1, rgb(1, 2, 3), rgba(1, 2, 3, 0)
  • brushSize: - widht of line

Interface:

  • destroy() - destroys the pen
  • setPenColor(inColor) - sets penColor
  • setBrushSize(inBrushSize) - sets brushSize

Example:

  var canvas          = document.getElementById('draw-canvas');
  brush = new RealisticPen(canvas, {
      penColor: [217, 101, 110],
      brushSize: 3 
  });
  brush.setPenColor('#cfa');
  brush.setBrushSize(5);

Version History

1.0.0

  • Fixed aliasing problem
  • Removed following API methods:
    • setBrushesCount()
    • brushPressure()
  • Removed config options:
    • brushesCount
    • brushPressure

0.0.2

Added canvas resizing on window resize

0.0.1

First release