All Projects → tsand → Responsive Sketchpad

tsand / Responsive Sketchpad

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Responsive Sketchpad

Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (+731.2%)
Mutual labels:  canvas, responsive
Elm Canvas
A canvas drawing library for Elm
Stars: ✭ 124 (-0.8%)
Mutual labels:  canvas
Freeciv Web
Freeciv-web is an Open Source strategy game implemented in HTML5 and WebGL, which can be played online against other players, or in single player mode against AI opponents.
Stars: ✭ 1,626 (+1200.8%)
Mutual labels:  canvas
Mp canvas drawer
🚀 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
Stars: ✭ 1,611 (+1188.8%)
Mutual labels:  canvas
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (-4%)
Mutual labels:  responsive
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-2.4%)
Mutual labels:  responsive
Canvas2video
Convert dynamic canvas to video, support merge audio
Stars: ✭ 117 (-6.4%)
Mutual labels:  canvas
Tachyons
Functional css for humans
Stars: ✭ 11,057 (+8745.6%)
Mutual labels:  responsive
Wfplayer
🌊 WFPlayer.js is an audio waveform generator
Stars: ✭ 124 (-0.8%)
Mutual labels:  canvas
Zigzagview
a zigzag view for using for ticket or invoice
Stars: ✭ 121 (-3.2%)
Mutual labels:  canvas
React Media Match
React made responsible - media queries backed by state machinery
Stars: ✭ 121 (-3.2%)
Mutual labels:  responsive
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: ✭ 119 (-4.8%)
Mutual labels:  responsive
Hilo3d
Hilo3d, a WebGL Rendering Engine.
Stars: ✭ 123 (-1.6%)
Mutual labels:  canvas
Quickmenu
The new era of mobile navigation for the web, we're out of hamburgers.
Stars: ✭ 119 (-4.8%)
Mutual labels:  responsive
Xsound
Web Audio API Library for Synthesizer, Effects, Visualization, Multi-Track Recording, Audio Streaming, Visual Audio Sprite ...
Stars: ✭ 123 (-1.6%)
Mutual labels:  canvas
Canvas grab
🌐 One-click script to synchronize files from Canvas LMS.
Stars: ✭ 118 (-5.6%)
Mutual labels:  canvas
Bubbly Bg
Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped)
Stars: ✭ 1,554 (+1143.2%)
Mutual labels:  canvas
Kirby Imageset
A flexible, responsive image component for Kirby 2, featuring lazy-loading, fancy placeholders and much more.
Stars: ✭ 122 (-2.4%)
Mutual labels:  responsive
G2
📊 A highly interactive data-driven visualization grammar for statistical charts.
Stars: ✭ 11,020 (+8716%)
Mutual labels:  canvas
Terminal Canvas
Manipulate the cursor in your terminal via high-performant, low-level, canvas-like API
Stars: ✭ 125 (+0%)
Mutual labels:  canvas

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

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);
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].