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