node package manager

cycle-canvas

cycle-canvas npm version Build Status

A canvas driver for Cycle.js. Great for games or art.

Currently highly experimental. Expect major breaking changes.

Installation

$ npm install cycle-canvas --save

Example

import {run} from '@cycle/rxjs-run';
import {makeCanvasDriver, rect, text} from 'cycle-canvas';
import {Observable} from 'rxjs/Observable';
 
function main () {
  return {
    Canvas: Observable.just(
      rect({
        x: 10,
        y: 10,
 
        width: 160,
        height: 100,
 
        draw: [
          {fill: 'purple'}
        ],
 
        children: [
          text({
            x: 15,
            y: 25,
 
            value: 'Hello World!',
 
            font: '18pt Arial',
 
            draw: [
              {fill: 'white'}
            ]
          })
        ]
      })
    )
  };
}
 
const drivers = {
  Canvas: makeCanvasDriver(null, {width: 800, height: 600})
};
 
run(main, drivers);

Looks like this:

img

Also check out the flappy bird example.

You can find the source for flappy bird here.

API

Creating a canvas driver

Drawing shapes and text

Transformations

Creating a canvas driver

makeCanvasDriver(selector, canvasSize = null)

A factory for the canvas driver function.

Receives a selector which should resolve to a canvas to which the driver function will attach.

If the selector does not resolve to a canvas, a new canvas element will be added at the bottom of the document and the driver will attach to that canvas.

The input to this driver is a stream of drawing instructions and transformations as detailed below.

Arguments

  • selector: string a css selector to use in order to find a canvas to attach the driver to.
  • canvasSize: {width: integer, height: integer} an object that denotes the size to set for the attached canvas. If null, the driver attaches to its canvas without altering its size.

Drawing shapes and text

rect(params = {})

Draws a rectangle given an object containing drawing parameters.

params {}:

  • x: number The x axis for the starting point.
  • y: number The y axis for the starting point.
  • width: number The rectangles width.
  • heigh: number The rectangles height.
  • draw: array List of drawing operation objects.
    • fill: string The color or style to use inside the rectangle. Default is black #000.
    • stroke: string The color or style to use as the stroke style. Default is black #000.
    • clear: boolean Sets all pixels in the rectangle to transparent.
  • children: array List of child drawing shapes or text. This property is optional.

Example:

rect({
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    draw: [
        {fill: 'purple'}
    ],
    children: [
        rect({
            x: 20,
            y: 20,
            width: 50,
            height: 50,
            draw: [
                {fill: 'blue'}
            ]
        })
    ]
})

line(params = {})

Draws line(s) given an object containing drawing parameters.

params {}:

  • x: number The x axis for the starting point.
  • y: number The y axis for the starting point.
  • style: object The style properties.
    • lineWidth: number The width of the line. Default is 1.
    • lineCap: string The end point of the line. Default is butt. Possible values are butt, round and square.
    • lineJoin: string The type of corner created when two lines meet. Default is miter. Possible values are miter, round and bevel.
    • strokeStyle: string The color or style to use as the stroke style. Default is black #000.
    • lineDash: array A list of numbers that specifies the line dash pattern.
  • points: array List of point objects that specify the x/y coordinates for each point.
  • children: array List of child drawing shapes or text. This property is optional.

Example:

line({
    x: 10,
    y: 10,
    style: {
        lineWidth: 2,
        lineCap: 'square',
        strokeStyle: '#CCCCCC'
    },
    points: [
        {x: 10, y: 10},
        {x: 10, y: 20},
        {x: 20, y: 10},
        {x: 10, y: 10}
    ]
})

polygon(params = {})

Draws line(s) given an object containing drawing parameters.

params {}:

  • points: array List of point objects that specify the x/y coordinates for each point of the polygon. Using less than 3 points is a terrible way to draw a line.
  • draw: array List of drawing operation objects.
    • fill: string The color or style to use inside the polygon. If not present, the polygon will not be filled.
    • stroke: string The color or style to use as the stroke style. If not present, the polygon will not have an outline.
  • children: array List of child drawing shapes or text. This property is optional.

Example:

polygon({
    points: [
        {x: 10, y: 0},
        {x: 0, y: 10},
        {x: 0, y: 30},
        {x: 30, y: 30},
        {x: 30, y: 10} // a house shaped polygon
    ],
    draw: {
        stroke: '#000',
        fill: '#ccc'
    },
})

text(options = {})

Draws text given an object containing drawing parameters.

params {}:

  • x: number The x axis for the starting point.
  • y: number The y axis for the starting point.
  • value: string The text to draw.
  • font: string The text style. Uses same syntax as the CSS font property.
  • draw: array List of drawing operations objects.
    • fill: string The color or style to fill the text. Default is black #000.
    • stroke: string The color or style to use as the stroke style. Default is black #000.
  • children: array List of child drawing shapes or text. This property is optional.

Example:

text({
    x: 10,
    y: 10,
    value: 'Hello World!',
    font: '18pt Arial',
    draw: [
        {fill: 'white'}
    ]
})

image(params = {})

Draws an image given an object containing drawing parameters.

params {}:

  • x: number The x axis for the starting point.
  • y: number The y axis for the starting point.
  • src: CanvasImageSource The image to draw.
  • width: number The width to scale the image to. This property is optional.
  • height: number The height to scale the image to. This property is optional.
  • sx: number The x axis of the source image. This property is optional.
  • sy: number The y axis of the source image. This property is optional.
  • sWidth: number The width of the source image. This property is optional.
  • sHeight: number The height of the source image. This property is optional.

Example:

image({
    x: 10,
    y: 10,
  src: document.querySelector('img')
})

Transformations

Transformations are added as a list to the transformations attribute to drawing shapes and text.

translate: {x: number, y: number}

Moves the canvas origin to a different point.

Example:

    rect({
        transformations: [
      {translate: {x: 10, y: 10}}
    ],
        x: 100,
        y: 100,
        width: 150,
        height: 150,
        draw: [
            {fill: 'purple'}
        ]
    })

rotate: number

Rotate the canvas around the current origin.

Example:

    rect({
        transformations: [
          {rotate: (20*Math.PI/180)}
    ],
        x: 10,
        y: 10,
        width: 150,
        height: 150,
        draw: [
            {fill: 'purple'}
        ]
    })

scale: {x: number, y: number}

Scales the drawing bigger or smaller.

Example:

    rect({
        transformations: [
          {scale: {x: 2, y: 2}},
    ],
        x: 10,
        y: 10,
        width: 150,
        height: 150,
        draw: [
            {fill: 'purple'}
        ]
    })

Combining transformations

Example:

Rotate around the point (100, 100) and draw a 50x50px box centered there:

    rect({
        transformations: [
      {translate: {x: 100, y: 100}},
      {rotate: (20*Math.PI/180)}
    ],
        x: -25, // At this point, {x: 0, y: 0} is a point on position {x: 100, y: 100} of the canvas
        y: -25,
        width: 50,
        height: 50,
        draw: [
            {fill: 'purple'}
        ]
    })