joshforisha / cycle-canvas-points

A Cycle.js driver for writing imageData values to canvas elements

cycle-canvas-points

A Cycle.js driver for writing imageData values to canvas elements.

API

• canvasPointsDriver (default export)

canvasPointsDriver

The expected sink$ is a stream of objects with the following members:

• canvas: HTMLCanvasElement – A <canvas> element (likely selected from sources.DOM)
• draw: (x: number, y: number) => number[] – A function that accepts x and y numbers as coordinates, and returns an array of three numbers that correspond to RGB color values (0–255).

Example

import canvasPointsDriver from 'cycle-canvas-points'
import { h } from '@cycle/dom'
import { run } from '@cycle/xstream-run'

function main (sources) {
  const testDraw$ = sources.select('canvas.test').elements()
    .map(canvas => ({ canvas, draw: (x, y) => [x, y, 0] }))

  const vdom$ = h('div', [
    h('canvas.test', { attrs: { height: 128, width: 256 } })
  ])

  return {
    DOM: vdom$,
    testCanvas: testDraw$
  }
}

run(main, {
  DOM: document.body,
  testCanvas: canvasPointsDriver
})