Comment on page
Functions
The canvas functions are the parts that create paths and do the rendering.
This document assumes you are familiar with the features of HTML 5 canvas, and therefore only covers the declarative API exposed by declarativas. See MDN CanvasRenderingContext2D documentation for more in-depth information on each function.
import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('arc', {
x: 0,
y: 0,
radius: 10,
startAngle: 0,
endAngle: Math.PI * 2, // in radians, defaults to Math.PI*2
anticlockwise: false, // defaults to false
}),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('arcTo', {
controlPointA: { x: 0, y: 0 },
controlPointB: { x: 30, y: 5 },
radius: 10,
}),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('moveTo', { x: 0, y: 0 }),
c('lineTo', { x: 10, y: 10 }),
c('stroke'),
],
);
import { c } from 'declarativas';
import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('bezierCurveTo', {
controlPointA: { x: 1, y: 2 },
controlPointB: { x: 3, y: 4 },
x: 5,
y: 6,
}),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('clearRect', {
x: 0,
y: 0,
width: 100
height: 100,
}),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('rect', { x: 100, y: 100, width: 200, height: 200 }),
c('clip'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('moveTo', { x: 10, y: 10 }),
c('lineTo', { x: 20, y: 10 }),
c('lineTo', { x: 20, y: 20 }),
c('closePath'),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('drawImage', {
image: 'url(https://placehold.it/100x100)', // can also be a reference to an `<img>` tag or `new Image()` variable
source: { x: 0, y: 0, width: 100, height: 100 }, // if omitted, default to entire image
destination: { x: 0, y: 0, width: 100, height: 100 }, // width and height can be omitted if source is omitted
}),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('ellipse', {
x: 100,
y: 100,
radius: { x: 50, y: 50 },
startAngle: 0, // defaults to 0
endAngle: Math.PI * 2, // defaults to Math.PI*2
anticlockwise: false, // defaults to false
}),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('fillStyle', { value: '#f0f' }),
c('rect', { x: 100, y: 100, width: 200, height: 200 }),
c('fill'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('fillStyle', { value: '#f0f' }),
c('fillRect', {
x: 0,
y: 0,
width: 100,
height: 100,
}),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('fillStyle', { value: 'black' }),
c('fillText', {
text: 'Hello World'
x: 100,
y: 100,
maxWidth: 200, // optional, defaults to width of text
}),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('moveTo', { x: 0, y: 0 }),
c('lineTo', {
x: 100,
y: 100,
});
c('stroke'),
],
);
import { render, c } from 'declarativas';