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';
render(
context2d,
[
c('moveTo', {
x: 0,
y: 0,
}),
c('lineTo', {
x: 10,
y: 10,
}),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('putImageData', {
image: imageDataFromGetImageDataCanvasJsApi,
source: { x: 0, y: 0, width: 100, height: 100 }, // if omitted, uses 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('beginPath'),
c('moveTo', { x: 10, y: 10 }),
c('quadraticCurveTo', {
controlPoint: { x: 55, y: 100 },
x: 100,
y: 10,
}),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('rect', {
x: 0,
y: 0,
width: 100,
height: 100,
}),
c('fillStyle', { value: '#f0f' }),
c('fill'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('save'),
c('translate', { x: 100, y: 10 }),
c('restore'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('rotate', {
value: 90 * (Math.PI / 180), // radians
}),
c('rect', {
x: -5,
y: -5,
width: 10,
height: 10,
}),
c('fillStyle', { value: '#f0f' }),
c('fill'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('save'),
c('fillStyle', { value: '#f0f' }),
c('translate', { x: 10, y: -90 }),
c('rotate', { value: 5 * (Math.PI / 180) }),
c('restore'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('scale', {
x: 1,
y: 1,
}),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('save'),
c('setLineDash', {
segments: [5, 10],
}),
c('beginPath'),
c('moveTo', { x: 10, y: 10 }),
c('lineTo', { x: 20, y: 20 }),
c('stroke'),
c('restore'),
],
);
setTransform
sets the current transform matrix to identity before multiplying.import { render, c } from 'declarativas';
render(
context2d,
[
c('setTransform', {
a: 1, // m11 - horizontal scaling
b: 1, // m12 - vertical skewing
c: 1, // m21 - horizontal skewing
d: 1, // m22 - vertical scaling
e: 1, // dx - horizontal translation
f: 1, // dy - vertical translation
}),
],
);
// Alternate syntax:
c('setTransform', {
matrix: new DOMMatrix([1, 1, 1, 1, 1, 1]),
});
import { render, c } from 'declarativas';
render(
context2d,
[
c('strokeStyle', { value: '#f0f' }),
c('rect', { x: 0, y: 0, width: 10, height: 10 }),
c('stroke'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('strokeStyle', { value: '#f0f' }),
c('strokeRect', {
x: 0,
y: 0,
width: 100,
height: 100,
}),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('strokeStyle', { value: 'black' }),
c('strokeText', {
text: 'Hello World'
x: 0,
y: 0,
maxWidth: 200, // optional, defaults to width of text
}),
],
);
transform
multiplies the current matrix, and does not set absolute values.import { render, c } from 'declarativas';
render(
context2d,
[
c('save'),
c('transform', {
a: 1,
b: 1,
c: 1,
d: 1,
e: 1,
f: 1,
}),
c('fillStyle', { value: '#f0f' }),
c('fillRect', { x: 0, y: 0, width: 10, height: 10 }),
c('restore'),
],
);
import { render, c } from 'declarativas';
render(
context2d,
[
c('save'),
c('translate', {
x: 100,
y: 100,
}),
c('fillStyle', { value: '#f0f' }),
c('fillRect', { x: 0, y: 0, width: 10, height: 10 }),
c('restore'),
],
);
Last modified 1yr ago