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