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​
​
Canvas API - Previous
Properties
Next - Canvas API
Components
Last modified 1yr ago