Attention! This repository is archived and the library has been moved to tinkoff/ng-web-apis monorepository

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

Method directives
Properties directives
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.

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

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:

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

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.

Uh oh!

License

ng-web-apis/canvas

ErrorLooks like something went wrong!

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Error
Looks like something went wrong!

Packages