responsive-sketchpad
v1.3.0
Published
A completely responsive sketchpad based on HTML5 canvas
Downloads
264
Maintainers
tsandersReadme
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);