Responsive-Sketchpad

A completely responsive, HTML5 canvas sketchpad for use on desktop and mobile browsers with no dependencies.

Installation

npm install responsive-sketchpad

Follow node-canvas setup instructions

Example Usage

<!-- index.html -->
<html>
  <head>
    <script src="script.js" async></script>
  </head>
  <body>
    <div id="sketchpad"></div>
  </body>
  <!-- Can also include global bindings if not using JS modules -->
  <!-- <script src="sketchpad.js"></script> -->
</html>

// script.js
var Sketchpad = require('responsive-sketchpad');
// Initialize Sketchpad
var el = document.getElementById('sketchpad');
var pad = new Sketchpad(el, {
    line: {
        color: '#f44335',
        size: 5
    }
});
// Set line color
pad.setLineColor('#f44336');
// Set line size
pad.setLineSize(10);
// Undo
pad.undo();
// Redo
pad.redo();
// Clear canvas
pad.clear();
// Resize canvas
pad.resize(100);
// Make read only
pad.setReadOnly(true);