docteurklein / cycle-canvas

A canvas driver for Cycle.js

cycle-canvas

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:

Also check out the flappy bird example.

You can find the source for flappy bird here.

##API

Creating a canvas driver

• makeCanvasDriver

Drawing shapes and text

• rect
• line
• text

Transformations

• translate
• rotate
• scale

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: stringThe 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'}
	]
})

##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

Roate 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 aroung 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'}
		]
	})