@ng-web-apis/canvas

A library for declarative use of Canvas API with Angular

Showing:

Popularity

Downloads/wk

12

GitHub Stars

65

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

3.4KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Angular WebGL

Readme

ng-web-apis logo Canvas API for Angular

Part of Web APIs for Angular

npm version npm bundle size Travis (.com) Coveralls github angular-open-source-starter

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):

  • opaqueboolean attribute to set alpha to false
  • desynchronizedboolean 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.

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.

Path

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

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:

canvas.png

Pipes

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

TODO

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial