@ng-web-apis/canvas
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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.

    Install

    npm i @ng-web-apis/canvas

    DownloadsWeekly Downloads

    13

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    675 kB

    Total Files

    117

    Last publish

    Collaborators

    • defenderbass
    • vladimir.potekhin
    • waterplea
    • marsibarsi