August 9, 2022

An Angular2/Angular4 Library for HTML Canvas | ngvas

The ngvas library allows you to control the <canvas> element from within Angular 2 and Angular 4.

html2canvas angular example, convert html to image angular, angular 7 canvas drawing, angular create canvas dynamically

TODOs for 1.0

  • Improve docs.
  • Unit tests with >90% coverage.
  • Improve originToCenter for curves and polygon.
  • Built-in Constraints.
  • Add mouse events: mousedown, mouseup
  • Add other hit area types: vector rectangle, circle.
  • Optimization.

TODOs for 1.x

  • Add drag and drop events.
  • Add HammerJS support.
  • Grouping components.
  • Optimization.
How to make use of it:


$ npm install ngvas –save


import { NgvasModule, tweens, hitAreas } from "ngvas";

  imports:      [ BrowserModule, NgvasModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
class AppModule { }
<ngvas [width]="500" [height]="500" (ready)="onNgvasInit()">
    <template ngFor let-rect [ngForOf]="rects">
        <ngvas-rectangle [fill]="rect.color" [translate]="rect.xy" [width]="rect.w" [height]="rect.h" origin="center"></ngvas-rectangle>
    <ngvas-circle [fill]="'#0000ff'" [x]="100" [y]="100" [radius]="50" origin="center" (click)="onClickHandler($event)" [hitArea]="PixelHitArea"></ngvas-circle>

<ngvas>: NgvasComponent Input Bindings

@Input(“name”)Data TypeDescription
activebooleanSets if animation in the canvas is active or not.
widthnumberSets the width of the <canvas> element.
heightnumberSets the height of the <canvas> element.

<ngvas>: NgvasComponent Event Bindings

@Output(“name”)Data TypeDescription
readyNgvasComponentFires once when the component is initialized.

Built-in Tweens

  • easeLinear
  • easeInSine, easeOutSine, easeInOutSine
  • easeInQuint, easeOutQuint, easeInOutQuint
  • easeInQuart, easeOutQuart, easeInOutQuart
  • easeInQuad, easeOutQuad, easeInOutQuad
  • easeInExpo, easeOutExpo, easeInOutExpo
  • easeInElastic, easeOutElastic, easeInOutElastic
  • easeInCircular, easeOutCircular, easeInOutCircular
  • easeInBack, easeOutBack, easeInOutBack
  • easeInBounce, easeOutBounce, easeInOutBounce
  • easeInCubic, easeOutCubic, easeInOutCubic

angular 4 module for html canvas, ngvas Plugin/Github

See Demo And Download

Official Website(patrimart): Click Here

This superior jQuery/javascript plugin is developed by patrimart. For extra advanced usage, please go to the official website.


You may also like...

Leave a Reply

Your email address will not be published.