1

I have a requirement for drawing something or writing something on top of image in Angular 2/4/5/6, I found out that in HTML5 we have canvas, but is there any package or anything available for doing the same in Angular 2/4/5/6?

Jayesh
  • 11
  • 1
  • 2
  • Canvas work with simple JavaScript, just use it. – Fussel May 25 '18 at 06:18
  • Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. – sabithpocker May 25 '18 at 06:18
  • Possible duplicate of [How to use canvas in Angular 2](https://stackoverflow.com/questions/44426939/how-to-use-canvas-in-angular2) – sabithpocker May 25 '18 at 06:21

1 Answers1

1

To give this an awnser

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

@Component( {
    selector: 'app-canvas',
    template: '<canvas #myCanvas width="600" height="400" style="z-index: 500;"></canvas>'
} )
export class CanvasComponent implements AfterViewInit {
    context: CanvasRenderingContext2D;
    @ViewChild( 'myCanvas' ) canvas: ElementRef;

    constructor() {}

    ngAfterViewInit() {
        const canvas = this.canvas.nativeElement;
        this.context = canvas.getContext( '2d' );

        this.tick();
    }

    tick() {
        requestAnimationFrame(() => this.tick() );

        const ctx = this.context;
        ctx.clearRect( 0, 0, 600, 400 );

        // draw stuff
    }
}
Fussel
  • 1,740
  • 1
  • 8
  • 27