canvas-loop

demo - source

Yet another canvas shell utility, built on canvas-fit and raf-loop. Useful for full-screen retina canvas demos.

Example:

var createGL = require('webgl-context')
var createLoop = require('canvas-loop')
 
// get a WebGL context
var gl = createGL()
var canvas = gl.canvas
document.body.appendChild(canvas)
 
// setup a retina-scaled canvas
var app = createLoop(canvas, {
  scale: window.devicePixelRatio
})
 
// start rendering
app.start()
 
// on requestAnimationFrame
app.on('tick', function(dt) {
  // do some rendering
  gl.clear(gl.COLOR_BUFFER_BIT)
})
 
// handle window resize
app.on('resize', function() {
  // the unscaled size
  var width = app.shape[0]
  var height = app.shape[1]
 
  console.log('new canvas size', width, height)
})

See demo.es6 for a full demo.

Usage

app = createLoop(canvas[, opt])

Creates a new loop with the given canvas (can be 2D or WebGL).

The options:

• parent element to fit to, or a scaling function (default window)
• scale scaling ratio for canvas (default 1)

These options are passed to canvas-fit.

app.start()

app.stop()

Start and stop the render loop. Returns the app for chaining.

app.on('tick', fn)

Listen to tick events, fn is called with dt parameter which is the delta time since last frame. Uses raf-loop.

app.on('resize', fn)

Called when the window has resized, after the canvas has been re-scaled according to its parent.

app.shape

A getter for the [ width, height ] of the canvas without device scaling. This is the same as:

[ canvas.width / app.scale, canvas.height / app.scale ]

app.parent

app.scale

Getters/setters to change parent or scale at runtime. See canvas-fit for details.

License

MIT, see LICENSE.md for details.