canvas-fit
v1.5.0
Published
Small module for fitting a canvas element within the bounds of its parent.
Downloads
737,578
Maintainers
Readme
canvas-fit
Small module for fitting a canvas element within the bounds of its parent. Useful, for example, for making a canvas fill the screen. Works with SVG elements too!
Usage
resize = fit(canvas[, parent[, scale]])
Creates a resize
function for your canvas
element. Calling this function
will resize the canvas to fit its parent element.
Here's a simple example to make your canvas update its dimensions when resizing the window:
var fit = require('canvas-fit')
var canvas = document.createElement('canvas')
window.addEventListener('resize', fit(canvas), false)
You might want to override the parent
element that the canvas should be
fitting within: in which case, pass that element in as your second argument:
window.addEventListener('resize'
, fit(canvas, window)
, false
)
You can also set the scale of the canvas element relative to its styled size
on the page using the scale
argument – for example, passing in
window.devicePixelRatio
here will scale the canvas resolution up on retina
displays.
resize.scale = <Number>
Dynamically change the canvas' target scale
. Note that you still need to
manually trigger a resize after doing this.
resize.parent = <DOMElement>
Dynamically change the canvas' parent
element. Note that you still need
to manually trigger a resize after doing this.
resize.parent = () => [width, height]
Instead of filling a given element, explicitly set the width and height
of the canvas. Note that this value will still be scaled up according
to resize.scale
resize.parent = function() {
return [ window.innerWidth - 300, window.innerHeight ]
}
License
MIT. See LICENSE.md for details.