@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 waCanvas2d class="canvas">
    <ng-container
        waCanvasFillRect
        [x]="0"
        [y]="0"
        [width]="100"
        [height]="50"
    ></ng-container>
</canvas>

Directives

There are 3 types of directives you can use:

1. Context directives
2. Method directives
3. Properties directives:

Context

These are applied to an HTMLCanvasElement and are used to defined scope of a particular context:

• waCanvas2d. Supports following attributes (see contextAttributes for 2D context):
  • opaque — boolean attribute to set alpha to false
  • desynchronized — boolean attribute to set desynchronized to true

Method

These are your typical directives to draw things on canvas. They are declarative counterparts of methods existing on CanvasRenderingContext2D:

• waCanvasFillRect
• waCanvasDrawImage

Properties

These directives set properties of CanvasRenderingContext2D. They must be added 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.

• waCanvasFillStyle
• waCanvasFilter
• waCanvasGlobalCompositeOperation

Example

Combining properties and method directive can be examine on the following example. Consider drawing two rectangles with native commands:

function drawTwoRectangles(context) {
    context.fillStyle = 'red';
    context.fillRect(0, 0, 100, 50);
    context.fillStyle = 'green';
    context.globalCompositeOperation = 'screen';
    context.fillRect(25, 25, 100, 50);
    context.fillStyle = '#000';
    context.globalCompositeOperation = 'source-over';
}

This is equivalent to the following HTML

<canvas waCanvas2d>
    <ng-container
        waCanvasFillRect
        waCanvasFillStyle="red"
        [x]="0"
        [y]="0"
        [width]="100"
        [height]="50"
    ></ng-container>
    <ng-container
        waCanvasFillRect
        waCanvasFillStyle="green"
        waCanvasGlobalCompositeOperation="screen"
        [x]="25"
        [y]="25"
        [width]="100"
        [height]="50"
    ></ng-container>
</canvas>

And it will give you this:

Development status

Canvas API is a vast topic. This library was created because of personal need for a few methods and properties on a 2D context. There is no particular schedule for implementing the rest of the API. If you need something that is missing it is rather easy to add given existing examples of method and property directives so PRs are very welcome. Alternatively, feel free to file an issue and we will get to it when we have time.

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.