Canvas-loop-engine NPM

canvas-loop-engine

A basic loop engine for canvas animation

Live example

Install

npm i canvas-loop-engine --save
or
yarn add canvas-loop-engine

Importing

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({ ...options })
MyLoop.start()

Options

$canvas

Type	Default	required	Description
`HTMLCanvasElement`	`null`	`true`	The canvas html element you want to draw on.

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas")
})

contextType

Type	Default	required	Description
`string`	`"2d"`	`false`	The canvas context type giving in the getContext. See getContext documentation

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  contextType: "webgl"
})

contextAttributes

Type	Default	required	Description
`object`	`null`	`false`	The canvas context attributes giving in the getContext. See getContext documentation

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  contextType: "webgl",
  contextAttribute: {
    antialias: false,
    depth: false
  }
})

autoStart

Type	Default	required	Description
`boolean`	`true`	`false`	Define if the loop engine should start automaticaly.

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  autoStart: false //default true
})

clearOnUpdate

Type	Default	required	Description
`boolean`	`true`	`false`	Automaticaly clear the canvas before each draw

Will trigger just before the onDraw functions

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  autoStart: false //default true
})

data

Type	Default	required	Description
`any`	`{}`	`false`	You can give a data object. it will be return as argument in every props function (onInit, onUpdate, onDraw, onStar, onStop) for a future usage.

Usually, you can use it to stock your drawing settings (particles etc...)
⚠️ The data object will be deeply clone. It will break every references

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  data: [{
    //...particle data
  }]
})

onInit

Type	Default	required	Description
`function` \| `array of function`	`null`	`false`	function or array of function that will trigger at the loop init

name	type	Description
$canvas	`HTMLCanvasElement`	the html convas element
ctx	`HTMLElement`	the html convas element
data	`any`	the data object you send at the init

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onInit: function ({ $canvas, ctx, data }) {
    //do things
  }
})

import Engine from "canvas-loop-engine"

const foo = function ({ $canvas, ctx, data }) {
  //do things
}
const bar = function ({ $canvas, ctx, data }) {
  //do things
}

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onInit: [foo, bar]
})

onStart

Type	Default	required	Description
`function` \| `array of function`	`null`	`false`	Function or array of function that will trigger when you start the loop

name	type	Description
$canvas	`HTMLCanvasElement`	the html convas element
ctx	`HTMLElement`	the html convas element
data	`any`	the data object you send at the init

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onStart: function ({ $canvas, ctx, data }) {
    //do things
  }
})

import Engine from "canvas-loop-engine"

const foo = function ({ $canvas, ctx, data }) {
  //do things
}
const bar = function ({ $canvas, ctx, data }) {
  //do things
}

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onStart: [foo, bar]
})

onStop

Type	Default	required	Description
`function` \| `array of function`	`null`	`false`	Function or array of function that will trigger when you stop the loop

name	type	Description
$canvas	`HTMLCanvasElement`	the html convas element
ctx	`HTMLElement`	the html convas element
data	`any`	the data object you send at the init

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onStop: function ({ $canvas, ctx, data }) {
    //do things
  }
})

import Engine from "canvas-loop-engine"

const foo = function ({ $canvas, ctx, data }) {
  //do things
}
const bar = function ({ $canvas, ctx, data }) {
  //do things
}

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onStop: [foo, bar]
})

onUpdate

Type	Default	required	Description
`function` \| `array of function`	`null`	`false`	Function or array of function that will trigger on each loop update

name	type	Description
$canvas	`HTMLCanvasElement`	the html convas element
ctx	`HTMLElement`	the html convas element
data	`any`	the data object you send at the init

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onUpdate: function ({ $canvas, ctx, data }) {
    //do things
  }
})

import Engine from "canvas-loop-engine"

const foo = function ({ $canvas, ctx, data }) {
  //do things
}
const bar = function ({ $canvas, ctx, data }) {
  //do things
}

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onUpdate: [foo, bar]
})

onDraw

Type	Default	required	Description
`function` \| `array of function`	`null`	`false`	Function or array of function that will trigger on each draw, usually, it's here you draw on canvas

name	type	Description
$canvas	`HTMLCanvasElement`	the html convas element
ctx	`HTMLElement`	the html convas element
data	`any`	the data object you send at the init

import Engine from "canvas-loop-engine"

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onDraw: function ({ $canvas, ctx, data }) {
    //draw things
  }
})

import Engine from "canvas-loop-engine"

const foo = function ({ $canvas, ctx, data }) {
  //draw things
}
const bar = function ({ $canvas, ctx, data }) {
  //draw things
}

const MyLoop = new Engine({
  $canvas: document.querySelector("canvas"),
  onDraw: [foo, bar]
})