Почему fillStyle не определено?

Question

Работа над угловым 2 проектом, который рисуется в холсте html 5. Основные функциональные возможности в том, что позиция пользователей мыши рисуется на экране и медленно исчезает (покрывается сверх полупрозрачных прямоугольников)

Прямо сейчас, когда я бегу сценарий, я получаю эту ошибку:

Cannot set property 'fillStyle' of undefined

Что я делаю не так?

interface mouseInterface { 
    previousX: number; 
    previousY: number; 
} 

import {Injectable} from '@angular/core'; 

@Injectable() 
export class CanvasService { 

    context: CanvasRenderingContext2D; 
    canvas: any = null; 

    init(canvas) { 
    this.canvas = canvas; 
    this.canvas.width = window.innerWidth; 
    this.canvas.height = window.innerHeight; 
    this.canvas.style = 'border:solid 1px red;' 
    this.context = canvas.getContext("2d"); 
    this.fadeOut(); 

    } 

    fadeOut() { 
    let ctx = this.context; 
    ctx.fillStyle = "rgba(255,255,255,.2)"; 
    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); 
    setTimeout(this.fadeOut, 100); 
    } 

    draw(data) { 
    //does drawing behavior based on mouse position 
    } 

} 

Answer 1

С кодом, который я вижу здесь, ваш init() не будет вызываться.

1. Имя метода: ngOnInit()

2. добавить инвентарь OnInit в: экспорт класс CanvasService реализует OnInit

3. Добавить Заявление импорта для OnInit: импорт {инъекционные, OnInit}
4. Проверьте, если ваша услуга указана в списке поставщиков в app.module.ts