canvas-loop-engine

canvas-loop-engine

A basic loop engine for canvas animation

Live example

• Install

• Importing

• Options

  • $canvas
  • contextType
  • contextAttributes
  • autoStart
  • clearOnUpdate
  • data
  • onInit
  • onStart
  • onStop
  • onUpdate
  • onDraw

• Methods

  • start()
  • stop()
  • toggle()
  • update()
  • draw()
  • isRunning

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
  }
})

or

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
  }
})

or

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
  }
})

or

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
  }
})

or

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
  }
})

or

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]
})

Methods

.start()

Type	Description
function	Start the loop, if it was'nt already start

Will trigger the onStart functions

.stop()

Type	Description
function	Stop the loop, if it was'nt already stop

Will trigger the onStop functions

.toggle()

Type	Description
function	Toogle the loop (stop or start)

Will trigger the onStop or onStart functions

.update()

Type	Description
function	trigger the onUpdate functions

.draw()

Type	Description
function	trigger the onDraw functions

.isRunning

Type	Description
boolean	the current loop status (if he's running or not)

TODO

• Doc
• TU
• TS