Comment on page

Functions

The canvas functions are the parts that create paths and do the rendering.

Notes

Depth of documentation

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.

Functions

arc

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'),
],
);
MDN

arcTo

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'),
],
);
MDN

beginPath

import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('moveTo', { x: 0, y: 0 }),
c('lineTo', { x: 10, y: 10 }),
c('stroke'),
],
);
MDN

bezierCurveTo

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'),
],
);
MDN

clearRect

import { render, c } from 'declarativas';
render(
context2d,
[
c('clearRect', {
x: 0,
y: 0,
width: 100
height: 100,
}),
],
);
MDN

clip

import { render, c } from 'declarativas';
render(
context2d,
[
c('rect', { x: 100, y: 100, width: 200, height: 200 }),
c('clip'),
],
);
MDN

closePath

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'),
],
);
MDN

drawImage

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

ellipse

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'),
],
);
MDN

fill

import { render, c } from 'declarativas';
render(
context2d,
[
c('fillStyle', { value: '#f0f' }),
c('rect', { x: 100, y: 100, width: 200, height: 200 }),
c('fill'),
],
);
MDN

fillRect

import { render, c } from 'declarativas';
render(
context2d,
[
c('fillStyle', { value: '#f0f' }),
c('fillRect', {
x: 0,
y: 0,
width: 100,
height: 100,
}),
],
);
MDN

fillText

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

lineTo

import { render, c } from 'declarativas';
render(
context2d,
[
c('beginPath'),
c('moveTo', { x: 0, y: 0 }),
c('lineTo', {
x: 100,
y: 100,
});
c('stroke'),
],
);
MDN

moveTo

import { render, c } from 'declarativas';
render(
context2d,
[
c('moveTo', {
x: 0,
y: 0,
}),
c('lineTo', {
x: 10,
y: 10,
}),
c('stroke'),
],
);
MDN

putImageData

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

quadraticCurveTo

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'),
],
);
MDN

rect

import { render, c } from 'declarativas';
render(
context2d,
[
c('rect', {
x: 0,
y: 0,
width: 100,
height: 100,
}),
c('fillStyle', { value: '#f0f' }),
c('fill'),
],
);
MDN

restore

import { render, c } from 'declarativas';
render(
context2d,
[
c('save'),
c('translate', { x: 100, y: 10 }),
c('restore'),
],
);
MDN

rotate

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'),
],
);
MDN

save

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'),
],
);
MDN

scale

import { render, c } from 'declarativas';
render(
context2d,
[
c('scale', {
x: 1,
y: 1,
}),
],
);
MDN

setLineDash

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'),
],
);
MDN

setTransform

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

stroke

import { render, c } from 'declarativas';
render(
context2d,
[
c('strokeStyle', { value: '#f0f' }),
c('rect', { x: 0, y: 0, width: 10, height: 10 }),
c('stroke'),
],
);
MDN

strokeRect

import { render, c } from 'declarativas';
render(
context2d,
[
c('strokeStyle', { value: '#f0f' }),
c('strokeRect', {
x: 0,
y: 0,
width: 100,
height: 100,
}),
],
);
MDN

strokeText

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

transform

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'),
],
);
MDN

translate

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'),
],
);
MDN