├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── package.json └── test └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Watson Design Group 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | canvas 2 | === 3 | 4 | A lightweight wrapper around the `` element to ease context and ratio handling. 5 | 6 | ## Install 7 | 8 | ``` 9 | npm install watsondg/canvas -S 10 | ``` 11 | 12 | ## Usage 13 | 14 | ``` 15 | var Canvas = require('canvas'); 16 | 17 | var canvas = new Canvas({ 18 | ratio: 1 // force to a specific deviceRatio 19 | }); 20 | canvas.resize(200, 200); 21 | var ctx = canvas.context; 22 | var r = canvas.ratio; 23 | 24 | ctx.lineTo(20 * r, 10 * r); 25 | ctx.lineTo(25 * r, 70 * r); 26 | ctx.stroke(); 27 | ``` 28 | 29 | ## Static Methods 30 | 31 | ### Canvas.getDPI() 32 | Defines how the DPI (simple, retina, ...) is calculated. Useful to override if you want to defaults to some processed value based on performance and device. Defaults to `window.devicePixelRatio`. 33 | 34 | ## Instance Methods 35 | 36 | ### new Canvas([options]) 37 | 38 | Create a new instance of Canvas. 39 | * `options` - (OPTIONAL) - configuration parameters: 40 | - ratio: force a devicePixelRatio. Defaults to window.devicePixelRatio or 1. 41 | - parent: a DOM element to automatically append to. If not provided, appending `canvas.el` is up to you. 42 | 43 | 44 | ### resize(width, height) 45 | 46 | Resize the canvas while maintaining ratio. 47 | * `width` - the width to set the canvas to. 48 | * `height` - the height to set the canvas to. 49 | 50 | 51 | ### clear() 52 | 53 | Clear the canvas. 54 | 55 | ### snapshot(type, quality) 56 | 57 | - shortcut to [canvas.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL). 58 | 59 | ### destroy() 60 | 61 | Destroy the instance. 62 | 63 | ## License 64 | MIT. -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = Canvas; 4 | 5 | function Canvas(options) { 6 | options = options || {}; 7 | this.el = document.createElement('canvas'); 8 | this.context = this.el.getContext('2d'); 9 | this.ratio = options.ratio || Canvas.getDPI(); 10 | this.width = 0; 11 | this.height = 0; 12 | 13 | if (options.parent) options.parent.appendChild(this.el); 14 | } 15 | 16 | Canvas.prototype.resize = function(width, height) { 17 | this.width = width; 18 | this.height = height; 19 | 20 | this.el.width = this.ratio * width; 21 | this.el.height = this.ratio * height; 22 | this.el.style.width = width + 'px'; 23 | this.el.style.height = height + 'px'; 24 | }; 25 | 26 | Canvas.prototype.clear = function() { 27 | this.context.clearRect(0, 0, this.width * this.ratio, this.height * this.ratio); 28 | }; 29 | 30 | // Am I the only one who never remembers if this is a canvas or context method??? 31 | Canvas.prototype.snapshot = function(type, quality) { 32 | return this.el.toDataURL(type, quality); 33 | }; 34 | 35 | Canvas.prototype.destroy = function() { 36 | this.context = null; 37 | if (this.el.parentNode) this.el.parentNode.removeChild(this.el); 38 | this.el = null; 39 | }; 40 | 41 | Canvas.getDPI = function() { 42 | return window.devicePixelRatio || 1; 43 | }; 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "canvas", 3 | "version": "1.1.0", 4 | "description": "A lightweight wrapper around the element to ease context and ratio handling.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "browserify test/index.js | tap-closer | smokestack | faucet", 8 | "test-debug": "budo test/index.js --live" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+ssh://git@github.com/watsondg/canvas.git" 13 | }, 14 | "keywords": [ 15 | "canvas", 16 | "context", 17 | "resize", 18 | "util", 19 | "wrapper", 20 | "utils" 21 | ], 22 | "author": "Florian Morel", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/watsondg/canvas/issues" 26 | }, 27 | "homepage": "https://github.com/watsondg/canvas#readme", 28 | "devDependencies": { 29 | "faucet": "0.0.1", 30 | "smokestack": "^3.4.1", 31 | "tap-closer": "^1.0.0", 32 | "tape": "^4.5.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var test = require('tape'); 4 | var Canvas = require('../index.js'); 5 | 6 | test('Instance creation test', function(assert) { 7 | var canvas = new Canvas({ 8 | parent: document.body 9 | }); 10 | canvas.resize(200, 200); 11 | 12 | assert.ok(Object.prototype.toString.call(canvas.context) == '[object CanvasRenderingContext2D]', 'The canvas should have a CanvasRenderingContext2D.'); 13 | assert.ok(canvas.el.getBoundingClientRect().width > 0, 'Width should be positive'); 14 | assert.end(); 15 | }); 16 | 17 | test('getDPI test', function(assert) { 18 | var canvas = new Canvas(); 19 | var ratio = window.devicePixelRatio; 20 | assert.ok(ratio === Canvas.getDPI(), 'Default ratio and window ratio should be identical.'); 21 | assert.ok(ratio === canvas.ratio, 'Canvas ratio and window ratio should be identical.'); 22 | 23 | var fakeRatio = 4; 24 | Canvas.getDPI = function() { 25 | return fakeRatio; 26 | }; 27 | 28 | canvas.destroy(); 29 | canvas = new Canvas(); 30 | assert.ok(canvas.ratio === fakeRatio, 'Canvas ratio and overriden getDPI ratio should be identical.'); 31 | 32 | assert.end(); 33 | }); --------------------------------------------------------------------------------