weRender

Simple, light-weight, Canvas library for 2D rendering

Features

• Chain API

• Drawing actions reusable

• Same methods as CanvasRenderingContext2D

Install

npm install we-render

Usage

• ES6 module

import { WeCanvas, WeStage } from 'we-render'

const child = new WeCanvas()
  .setSize(100, 100)
  .scale(2, 2)
  .fillStyle("red") // different here
  .fillRect(0, 0, 10, 10)

const stage = new WeStage()

stage.addChid(child)
stage.update()

• In browser

<script type="text/javascript" src="../dist/weRender.min.js"></script>
<script type="text/javascript">
var WeStage = weRender.WeStage;
var WeCanvas = weRender.WeCanvas;

var stage = new WeStage(document.querySelector("#canvas"));
stage.setSize(500, 500);
stage.setStyle("500px", "500px");

var yellowCircle = new WeCanvas({
  width: 100,
  height: 100,
})
.beginPath()
.fillStyle("yellow")
.arc(50, 50, 50, 0, 2 * Math.PI)
.fill()

stage.addChild(yellowCircle);
stage.update();
</script>

Examples

See examples: npm run static

• simple

• clone

• reuse actions

• composite

• zoom

Scripts

Usefull Scripts, see:

• scripts

API reference

Modules

Classes

weRender

weRender: Simple Canvas library for easy usage

WeCanvas

WeCanvas: Easy canvas api for using, support useing chain

• Directly use CanvasRenderingContext2D methods
• Property of CanvasRenderingContext2D here is method
• Won't really drawing Canvas until run draw()

Kind: global class

• WeCanvas
  • new WeCanvas(options)
  • .setSize(width, height)
  • .setStyle(width, height)
  • .setCoordinate(x, y)
  • .setScale(scale)
  • .clear()
  • .getActions()
  • .setActions(actions)
  • .draw()
  • .cache(ifCache)

new WeCanvas(options)

create a WeCanvas instance

| Param | Type | Description | | --- | --- | --- | | options | Object | option settions for instance |

weCanvas.setSize(width, height)

set canvas size

Kind: instance method of WeCanvas

| Param | Type | Description | | --- | --- | --- | | width | Number | canvas width | | height | Number | canvas height |

weCanvas.setStyle(width, height)

set canvas style, only width and height

Kind: instance method of WeCanvas

| Param | Type | Description | | --- | --- | --- | | width | String | canvas style width | | height | String | canvas style height |

weCanvas.setCoordinate(x, y)

set coordinate of stage

Kind: instance method of WeCanvas

| Param | Type | Default | Description | | --- | --- | --- | --- | | x | Number | 0 | horizontal axis | | y | Number | 0 | vertical axis |

weCanvas.setScale(scale)

set init scale

Kind: instance method of WeCanvas

| Param | Type | Description | | --- | --- | --- | | scale | Number | scale ratio |

weCanvas.clear()

clear canvas

Kind: instance method of WeCanvas

weCanvas.getActions()

get actions for context drawing

Kind: instance method of WeCanvas

weCanvas.setActions(actions)

set actions

Kind: instance method of WeCanvas

| Param | Type | Description | | --- | --- | --- | | actions | Array | actions for context drawing |

weCanvas.draw()

run actions, draw canvas

Kind: instance method of WeCanvas

weCanvas.cache(ifCache)

set cache, default: true

Kind: instance method of WeCanvas

| Param | Type | Default | Description | | --- | --- | --- | --- | | ifCache | Boolean | true | if set cache |

WeStage

WeStage: Canvas manager for WeCanvas

Kind: global class

• WeStage
  • new WeStage(canvas, options)
  • .setSize(width, height)
  • .setStyle(width, height)
  • .destory()
  • .clear()
  • .addChild(child)
  • .translate(x, y, reset)
  • .update()

new WeStage(canvas, options)

create a WeStage instance

| Param | Type | Description | | --- | --- | --- | | canvas | Canvas | a Canvas element related to the dom | | options | Object | stage settings |

weStage.setSize(width, height)

set stage size

Kind: instance method of WeStage

| Param | Type | Description | | --- | --- | --- | | width | Number | stage width | | height | Number | stage height |

weStage.setStyle(width, height)

set stage style

Kind: instance method of WeStage

| Param | Type | Description | | --- | --- | --- | | width | String | stage style width | | height | String | stage style height |

weStage.destory()

destrory stage

Kind: instance method of WeStage

weStage.clear()

clear canvas

Kind: instance method of WeStage

weStage.addChild(child)

add child to the stage

Kind: instance method of WeStage

| Param | Type | Description | | --- | --- | --- | | child | WeCanvas | Object | WeCanvas instance or Object cotains Canvas |

weStage.translate(x, y, reset)

translate stage, move coordinate

Kind: instance method of WeStage

| Param | Type | Default | Description | | --- | --- | --- | --- | | x | Number | 0 | offset x | | y | Number | 0 | offset y | | reset | Boolean | false | should reset after update |

weStage.update()

update stage, draw child on canvas run this method, all child canvas will draw

Kind: instance method of WeStage

docs autogenerated via jsdoc2md