Skip to content

A completely responsive, HTML5 canvas sketchpad for use on desktop and mobile browsers

License

Notifications You must be signed in to change notification settings

tsand/responsive-sketchpad

Repository files navigation

Responsive-Sketchpad

npm version Build

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

Demo

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