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

• [x] Doc
• [ ] TU
• [ ] TS