https://github.com/hughsk/canvas-fit

Small module for fitting a canvas element within the bounds of its parent.
https://github.com/hughsk/canvas-fit

Last synced: 13 days ago
JSON representation

Small module for fitting a canvas element within the bounds of its parent.

• Host: GitHub
• URL: https://github.com/hughsk/canvas-fit
• Owner: hughsk
• License: other
• Created: 2014-05-13T21:49:33.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-09-29T18:25:46.000Z (about 9 years ago)
• Last Synced: 2024-10-17T16:39:46.779Z (22 days ago)
• Language: JavaScript
• Size: 191 KB
• Stars: 54
• Watchers: 4
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# canvas-fit [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges)

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](https://nodei.co/npm/canvas-fit.png)](https://nodei.co/npm/canvas-fit/)

### 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:

``` javascript

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:

``` javascript

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 = `

Dynamically change the canvas' target `scale`. Note that you still need to

manually trigger a resize after doing this.

### `resize.parent = `

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`

``` javascript

resize.parent = function() {

  return [ window.innerWidth - 300, window.innerHeight ]

}

```

## License

MIT. See [LICENSE.md](http://github.com/hughsk/canvas-fit/blob/master/LICENSE.md) for details.