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​
​
Last modified 10mo ago