The components that declarativas exposes make the canvas APIs feel like the dom, in the sense that you can build proper hierarchies, or group logical render functions and properties together. All the components that are exposed use the basic properties and functions that declarativas makes accessible via the c(propertyOrFunction, { ...props })method.
Components
Circle
Helper method to make it easier to draw a circle.
import { render, components } from'declarativas';render( context2d, [components.Circle({ fill:'#f0f',// optional, sets fill style and fills circle stroke:'black',// optional, sets stroke style and outlines circle cx:100, cy:100, r:20, pathLength:Math.PI*2,// defaults to Math.PI*2 }), ],);
Ellipse
import { render, components } from'declarativas';render( context2d, [components.Ellipse({ fill:'#f0f',// optional, sets fill style and fills circle stroke:'black',// optional, sets stroke style and outlines circle cx:100, cy:100, rx:20, ry:30 pathLength: Math.PI*2,// defaults to Math.PI*2 }), ],);
Properties
Helper method to make it easier to draw an ellipse.
Helper method to make it easier to draw a rectangle.
import { render, components } from'declarativas';render( context2d, [components.Rect({ fill:'#f0f',// optional, sets fill style and fills circle stroke:'black',// optional, sets stroke style and outlines circle x:100, y:100, width 20, height:30 }), ],);
RevertableState
Helper method to preserve the state before a set of operations, and restore it at the end.
import { render, components } from'declarativas';render( context2d, [components.RevertableState({}, [c('translate', { x:10, y:300 }),c('fillStyle', { value:'#f0f' }),c('fillRect', { x:0, y:0, width:100, height:100 }),// revertableState can be nested safely, and// will restore various levels of canvas state ]),// translate is back to origin 0,0 ],);
Shadow
Helper method to set the collection of shadow properties.