API

Table of Contents

• Renderium
  • .digest()
  • .spawn(renderer)
  • .kill(renderer)
  • #constructor(options)
  • #addLayer(layer)
  • #removeLayer(layer)
• Renderium.CanvasLayer
  • #constructor(options)
  • #addComponent(component)
  • #addComponents(components)
  • #removeComponent(component)
  • #removeComponents(components)
  • #clearComponents()
  • #createGradient(options)
  • #drawArc(options)
  • #drawCircle(options)
  • #drawImage(options)
  • #drawPolygon(options)
  • #drawPolyline(options)
  • #drawRect(options)
  • #drawText(options)
  • #measureText(options)
• Renderium.Component
  • #plot(layer)
  • #draw(layer)
  • #shouldRedraw()

Renderium

.digest()

Guarantees per frame synchronization of all renderers. Recommended to use requestAnimationFrame or raf

requestAnimationFrame(function loop (t) {
  Renderium.digest()
  requestAnimationFrame(loop)
})

.spawn(renderer)

Throw errors:

• if renderer has already been spawned

.kill(renderer)

#constructor(options)

#addLayer(layer)

Throw errors:

• if layer has already been added to renderer

#removeLayer(layer)

Renderium.CanvasLayer

#constructor(options)

List of useful properties

• .canvas - <canvas/> element
• .ctx - canvas 2d context
• .width - layer width
• .height - layer height
• .components - list of added components

#addComponent(component)

Throw errors:

• if component has already been added to layer
• if component has not implemented Component interface

#addComponents(components)

#removeComponent(component)

#removeComponents(components)

#clearComponents()

#createGradient(options)

options

Name	Type	Default
start	Vector
end	Vector
from	String
to	String

Create gradient, based on this behaviour, and then used like common color

var gradient = layer.createGradient({
  start: new Vector(0, 75),
  end: new Vector(0, 125),
  from: '#03a9f4',
  to: '#3f51b5'
})

#drawArc(options)

options

Name	Type	Default
position	Vector
radius	Number
startAngle	Number
endAngle	Number
color	`String	Gradient`
width	Number	1

Draw simple arc, based on this behaviour

layer.drawArc({
  position: new Vector(300, 100),
  color: '#4caf50',
  radius: 25,
  startAngle: Math.PI,
  endAngle: Math.PI / 2,
  width: 2
})

Check examples

#drawCircle(options)

options

Name	Type	Default
position	Vector
radius	Number
color	`String	Gradient`
fillColor	`String	Gradient`
width	Number	1

Draw simple circle, based on this behaviour

layer.drawCircle({
  position: new Vector(300, 100),
  color: '#2196f3',
  fillColor: '#2196f3',
  radius: 25
})

Check examples

#drawImage(options)

options

Name	Type	Default
position	Vector
image	`Image	String`
width	Number	image.width
height	Number	image.height
opacity	Number	1

Draw simple image, if you pass url instead of image instance, it will be loaded first, and then reused. position is the upper left corner of image

layer.drawImage({
  position: new Vector(350, 100),
  image: 'https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',
  width: 256,
  height: 256,
  opacity: 1
})

Check examples

#drawPolygon(options)

options

Name	Type	Default
points	Array<Vector>
color	`String	Gradient`
fillColor	`String	Gradient`
width	Number	1

Draw polygon. points is vertices of polygon

layer.drawPolygon({
  points: [
    new Vector(50, 50),
    new Vector(100, 50),
    new Vector(75, 75)
  ],
  color: '#2196f3',
  fillColor: '#2196f3',
  width: 2
})

Check examples

#drawPolyline(options)

options

Name	Type	Default
points	Array<Vector>
color	`String	Gradient`
lineDash	Array<Number>	[]
width	Number	1

Draw polyline. points is vertices of polyline

layer.drawPolyline({
  points: [
    new Vector(50, 50),
    new Vector(100, 50),
    new Vector(75, 75)
  ],
  color: '#2196f3',
  lineDash: [2, 2],
  width: 2
})

Check examples

#drawRect(options)

options

Name	Type	Default
position	Vector
width	Number
height	Number
color	`String	Gradient`
fillColor	`String	Gradient`
strokeWidth	Number	1

Draw rectangle. position is the upper left corner of rectangle

layer.drawRect({
  position: new Vector(300, 100),
  color: '#2196f3',
  fillColor: '#2196f3',
  width: 100,
  height: 50,
  strokeWidth: 2
})

Check examples

#drawText(options)

options

Name	Type	Default
position	Vector
text	String
color	`String	Gradient`
font	String
size	Number
align	String	'center'
baseline	String	'middle'

Draw text

layer.drawText({
  position: new Vector(300, 100),
  text: 'Sample text',
  color: '#2196f3',
  font: 'sans-serif',
  size: 16
})

Check examples and different alignments

#measureText(options)

options

Name	Type	Default
text	String
font	String
size	Number

Returns only text width, based on this behaviour. Because there is no adequate method to measure text height and different browsers render text differently

var textWidth = layer.measureText({
  text: 'Sample text',
  font: 'Helvetica',
  size: 24
})

Renderium.Component

#plot(layer)

#draw(layer)

#shouldRedraw()