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 for improving efficiency.

SVG to Canvas

See: https://github.com/weiying-shenzhen/svgToCanvas

Examples:

See examples under directoryexamples/path

API reference

Modules

weRender

weRender: Simple Canvas library for easy usage

Classes

WeCanvas

WeCanvas: Easy canvas api for using, support useing chain

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

WeStage

WeStage: Canvas manager for WeCanvas

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