Components

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.
import { render, components } from 'declarativas';
​
render(
  context2d,
  [
    components.Properties({
      fillStyle: 'black',
      strokeStyle: 'white',
      lineWidth: 2,
    }),
  ],
);
Properties
Rect
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.
import { render, components } from 'declarativas';
​
render(
  context2d,
  [
    components.Shadow({
      blur: 5,
      color: '#555',
      offset: { x: 2, y: 0 },
    }, [
      c('beginPath'),
      c('moveTo', { x: 10, y: 10 }),
      c('lineTo', { x: 100, y: 100 }),
      c('stroke'),
    ]),
  ],
);
Last modified 1yr ago