canvas-loop-engine

A basic loop engine for canvas animation

Usage no npm install needed!

<script type="module">
  import canvasLoopEngine from 'https://cdn.skypack.dev/canvas-loop-engine';
</script>

README

canvas-loop-engine

CircleCI Status codecov npm npm npm

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

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