Wondering what’s next for npm?Check out our public roadmap! »

    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/canvas-fit package

    1.5.0 • Public • Published

    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!



    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:

      , 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 ]


    MIT. See LICENSE.md for details.


    npm i canvas-fit

    DownloadsWeekly Downloads






    Last publish


    • avatar