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