JavaScript Library for Drawing Complex Canvas Graphics Using Angular

ng2-konva is a JavaScript library for drawing complex canvas drawings using Angular. Provides descriptive and interactive links to the Konva framework.

angular canvas drawing example, angular canvas draw image, angular draw shapes, angular canvas component, angular canvas drag and drop

Events

All events return two params, the angular component, and the event

click
dblclick
mouseover
tap
dbltap
touchstart
scaleXChange
fillChange
dragstart
dragmove
dragend

How to make use of it:

Installation:

$ npm install konva ng2-konva --save

1. Then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import KonvaModule
import { KonvaModule } from 'ng2-konva';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    KonvaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Once you import KonvaModule, you can use its components in your Angular app:

import { of } from 'rxjs/Observable';

@Component({
  selector: 'app',
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-circle [config]="configCircle" (click)="handleClick($event)"></ko-circle>
      </ko-layer>
    </ko-stage>`
})
class AppComponent implements OnInit {
  public configStage: Observable<any> = of({
    width: 200,
    height: 200
  });
  public configCircle: Observable<any> = of({
    x: 100,
    y: 100,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
  });

  public handleClick(component) {
    console.log('Hello Circle', component);
  }
}

drawing complex canvas graphics with angular, ng2-konva Plugin/Github