Canvas API for Angular

This is a library for declarative use of Canvas API with Angular.

Install

If you do not have @ng-web-apis/common:

npm i @ng-web-apis/common

Now install the package:

npm i @ng-web-apis/canvas

Usage

Add CanvasModule to your module declaration and use waCanvas2d directive on a canvas element to declare 2D context scope. Then use other directives to draw inside canvas:

<canvas waCanvas2d>
  <canvas-path fillStyle="red">
    <canvas-rect
      [x]="0"
      [y]="0"
      [width]="100"
      [height]="50"
    ></canvas-rect>
  </canvas-path>
</canvas>

Context directive supports the following attributes (see contextAttributes for 2D context):

• opaque — boolean attribute to set alpha to false
• desynchronized — boolean attribute to set desynchronized to true

Directives

There are 3 types of directives you can use:

1. Method directives
2. Properties directives
3. Path directives

Method

These are basic directives to draw things on canvas.

• canvas-clip-path
• canvas-draw-image
• canvas-text
• canvas-path
  • You can use path input to pass Path2D

Properties

These directives set properties of CanvasRenderingContext2D. They must be applied to a method directive and they change context property before calling the method. They also restore default value after drawing is performed so it will not interfere with the rest of picture.

• clip
  • Either pass a reference to canvas-clip-path directive or a Path2D object
• clipFillRule
• direction
• fillStyle
• filter
• imageSmoothingEnabled
• imageSmoothingQuality
• font
• globalAlpha
• globalCompositeOperation
• lineCap
• lineDashOffset
• lineJoin
• lineWidth
• lineDash
• miterLimit
• strokeStyle
• textAlign
• textBaseline
• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY
• transform

Path

You can use following directives to draw path on Canvas. They must be children of canvas-path directive:

• canvas-arc
• canvas-arc-to
• canvas-bezier-curve-to
• canvas-ellipse
• canvas-line-to
• canvas-move-to
• canvas-quadratic-curve-to
• canvas-rect

Example

Combining properties, method and path directives can be examined on the following case. Consider drawing two rectangles with native commands:

function drawTwoRectangles(context) {
  context.beginPath();
  context.fillStyle = 'red';
  context.rect(0, 0, 100, 50);
  context.fill();

  context.beginPath();
  context.fillStyle = 'green';
  context.globalCompositeOperation = 'screen';
  context.rect(25, 25, 100, 50);
  context.fill();

  context.fillStyle = '#000';
  context.globalCompositeOperation = 'source-over';
}

This is equivalent to the following HTML

<canvas waCanvas2d>
  <canvas-path fillStyle="red">
    <canvas-rect
      [x]="0"
      [y]="0"
      [width]="100"
      [height]="50"
    ></canvas-rect>
  </canvas-path>
  <canvas-path
    fillStyle="green"
    globalCompositeOperation="screen"
  >
    <canvas-rect
      [x]="25"
      [y]="25"
      [width]="100"
      [height]="50"
    ></canvas-rect>
  </canvas-path>
</canvas>

And both will give you this result:

Pipes

You can use Pipes to create some of the classes, required for particular Canvas operations:

• gradient to create CanvasGradient
• path to create Path2D
• pattern to create CanvasPattern
• rad to convert degrees into radians
• transform to convert CSS transform string into DOMMatrix

Notes

• Performance-wise it would of course be slower than performing imperative commands and optimizing them manually. But unless you are making a video game with heavy render cycle this shouldn't be noticeable.
• Unlike raw canvas, default stroke color is transparent to align behavior with SVG.

See also

Other Web APIs for Angular by @ng-web-apis