canvas-fit
Small module for fitting a canvas element within the bounds of its parent.
Last updated 5 years ago by hughsk .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install canvas-fit 
SYNC missed versions from official npm registry.

canvas-fit stable

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

NPM

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.

Current Tags

  • 1.5.0                                ...           latest (5 years ago)

9 Versions

  • 1.5.0                                ...           5 years ago
  • 1.4.0                                ...           6 years ago
  • 1.3.0                                ...           6 years ago
  • 1.2.0                                ...           6 years ago
  • 1.1.2                                ...           6 years ago
  • 1.1.1                                ...           6 years ago
  • 1.1.0                                ...           6 years ago
  • 1.0.0                                ...           7 years ago
  • 0.0.0                                ...           7 years ago

Copyright 2014 - 2017 © taobao.org |