resize-canvas
Change dimensions of an html5 canvas element, resizing from a relative position on canvas (center by default) and preserving image data
Details
Similar to how you can change resolution of an image in photoshop, but with granular control of the from
position. Adjust with an absolute new size or a relative change. This new version resizes the canvas in place instead of returning you a new canvas with the different size. To get a new canvas, supply a copy of the original.
Installation
Download node at nodejs.org and install it, if you haven't already.
npm install resize-canvas --save
Usage
let canvas = document // set height and widthcanvaswidth = 300canvasheight = 200 // add to domdocumentbody // draw a circlelet ctx = canvasctxctxctx // change size from [300, 200] to [300, 250] from center // or by size difference adding to the top and left sides canvaswidth // 50canvasheight // 200
API
resizeCanvas( { canvas, diff, size, from } )
Arguments
- canvas : canvas - An html5 canvas element to resize and draw from
- size : array - New size of the canvas ex: [200, 300]
- diff : array - Pixels to add/remove to the canvas ex: [-20, 30]
- from : array - Point on the canvas to resize from. The lower right is the width and height of the canvas [canvas.width, canvas.height]. Top left is [0, 0]. It is center by default [canvas.width/2, canvas.height/2].
License
ISC