Nuns Practicing Misanthropy
Have ideas to improve npm?Join in the discussion! »


0.2.1 • Public • Published


Somewhat speedy <canvas> renderer for drawing lots of mostly-unchanging lines.



const renderer = lyner({
  camera: { x: 0, y: 0, zoom: 1 }
renderer.line(20, 20, 50, 50, { color: '#f00' })
requestAnimationFrame(function frame() {


You can draw multiple lyner instances on top of each other to create multiple layers on a single canvas.

const background = lyner()
const foreground = lyner({ canvas: background.canvas, camera: })
background.line(0, 0, 100, 100, { color: 'black' })
foreground.line(0, 100, 100, 0, { color: 'pink'  })
requestAnimationFrame(function frame() {
  // .clear() clears the canvas, so it clears both `background`
  // and `foreground`s artistry at once

For convenience, the layer method lets you not worry about passing the correct camera and canvas.

const renderer = lyner()
const background = renderer.layer()
const foreground = renderer.layer()
// Note: you can still draw things directly on `renderer`.
background.line(0, 0, 100, 100, { color: 'black' })
foreground.line(0, 100, 100, 0, { color: 'pink'  })
requestAnimationFrame(function frame() {
  // This will now render both layers.


let renderer = lyner(opts={})

Creates a new lyner instance.

opts is an object with properties:

  • width: Width of the canvas. Defaults to 640.
  • height: Height of the canvas. Defaults to 480.
  • canvas: An existing canvas element. lyner creates a new canvas element of the given dimensions if no existing canvas is passed in.
  • camera: An object with x, y and zoom properties specifying the initial camera position. Here, x and y define which coordinates will be rendered in the center of the canvas. Defaults to { x: 0, y: 0, zoom: 1 }.
  • cellSize: Pixel size of the caching grid cells. Larger cells means a longer initial drawing time, but fewer drawImage calls on every rerender. Cells are initialised when they are in view, so if you're drawing lots of lines, large cells might cause some panning jank. Defaults to 100 pixels.
  • renderCache: lyner.RenderCache instance used for rendering this lyner's lines to. By sharing RenderCache instances between lyner instances, you can draw different layers of lines (in different lyner instances) on the same set of cache canvases, which can save lots of time in drawImage calls on every frame if you have many layers (say, more than two).

let line = renderer.line(x0, y0, x1, y1, opts={})

Adds a line from (x0, y0) to (x1, y1). Possible options are:

  • width: Width of the line. Defaults to 1, which equals 1 pixel at zoom level 1.
  • color: Rendered color of the line (its strokeStyle). Defaults to "black".

Returns the newly added line. A line has x0, y0, x1, y1, width and color properties intended primarily for reading.


Removes a line from the world.


Contains the underlying canvas DOM element in the browser, or a canvas instance in Node/io.js.


Clears the canvas.


Draws lines to the canvas.

Contains the camera position. This object has x, y and zoom properties, just like the parameter in lyner().


Adjusts the zoom level. Negative numbers zoom out, while positive numbers zoom in.


Returns the RenderCache instance used. You can then pass that instance to other lyner instances.

let renderCache = lyner.RenderCache(opts={})

Creates a new render cache grid. This has no public methods and should only be used to share render caches between lyner instances.

opts are:

  • cellSize: Pixel size of individual grid cells. This must be equal to the size given in the lyner() constructor. Defaults to 100 pixels.




npm i lyner

DownloadsWeekly Downloads






Last publish


  • avatar