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,
    }),
  ],
);
pageProperties

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 updated