https://github.com/tsand/responsive-sketchpad

A completely responsive, HTML5 canvas sketchpad for use on desktop and mobile browsers
https://github.com/tsand/responsive-sketchpad

canvas html5-canvas-sketchpad javascript mobile-sketchpad responsive

Last synced: 28 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tsand/responsive-sketchpad
• Owner: tsand
• License: mit
• Created: 2013-04-14T23:31:43.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2025-03-26T16:37:35.000Z (8 months ago)
• Last Synced: 2025-04-02T12:40:30.017Z (7 months ago)
• Topics: canvas, html5-canvas-sketchpad, javascript, mobile-sketchpad, responsive
• Language: TypeScript
• Homepage: https://tsand.github.io/responsive-sketchpad/
• Size: 599 KB
• Stars: 156
• Watchers: 10
• Forks: 45
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Responsive-Sketchpad

[![npm version](https://img.shields.io/npm/v/responsive-sketchpad)](https://www.npmjs.com/package/responsive-sketchpad)

[![Build](https://github.com/tsand/responsive-sketchpad/workflows/Build/badge.svg)](https://github.com/tsand/responsive-sketchpad/actions)

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

[Demo](https://tsand.github.io/responsive-sketchpad/)

### Installation

`npm install responsive-sketchpad`

> Follow [node-canvas](https://www.npmjs.com/package/canvas) setup instructions

### Example Usage

```html

  

    

  

  

    


  

  

  


```

```js

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

```