Awesome Open Source
Awesome Open Source

weRender

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

Features

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

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 CanvasRenderingContext2Dmethods
  • Property of CanvasRenderingContext2D here is method
  • Won't really drawing Canvas until run draw()

Kind: global class

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

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,100
library (1,276
canvas (358
rendering (163
2d-graphics (19

Find Open Source By Browsing 7,000 Topics Across 59 Categories