@ng-web-apis/canvas

Canvas API for Angular

Part of Web APIs 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-path waCanvas2d>
    <canvas-path fillStyle="red">
        <canvas-rect
            [x]="0"
            [y]="0"
            [width]="100"
            [height]="50"
        ></canvas-rect>
    </canvas-path>
</canvas>

Context directive supports 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-draw-image
• canvas-text
• canvas-path
  • You can use path input to pass Path2D if you do not need IE support

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.

• direction
• fillStyle
• filter
• imageSmoothingEnabled
• imageSmoothingQuality
• font
• globalAlpha
• globalCompositeOperation
• lineCap
• lineDashOffset
• lineJoin
• lineWidth
• lineDash
• miterLimit
• strokeStyle
• textAlign
• textBaseline
• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY

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

TODO

• Tranformations:
  • scale
  • rotate
  • translate
  • transform
• Clipping

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

Open-source

Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.