Ultimo exercício de Lógica de Programação II - canvas

Opa, não sou o mestre Flavio e não manjo de angular 2, mas enquanto ele não aparece aqui para ajudar, será que não vale a pena vc fazer o curso de angular 2? Ele tem como prereq os de js avançado... acho que talvez vc tenha dado um passo grande demais.

Opa blzz!! Sim já fiz o curso de angular 2 e es6.

Dei uma recapitulada no curso es6 e consegui dar uma melhorada boa no código para resolver o problema do this, mas ficarei grato se o professor puder dar uma olhada e me dar algumas dicas. Obrigado!!!

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


    let self:any; //VARIAVEL QUE IRA RECEBER O THIS

@Component({
    selector: 'desenhopalet',
    template: `<canvas #can ></canvas>`
})


export class DesenhoPaletCorComponent {

      @ViewChild('can') canvasRef:ElementRef;

                        private canvas: any;
                        private ctx:any;
                        private offsetLeft;
                        private offsetTop;
                        private xVermelho = 0;
                        private xVerde  = 50;
                        private xAzul = 100;
                        private tamanhoQuadrados = 50;
                        private yQuadrados = 0;
                        private desenha = false;
                        private corAtual = 'red';


                        @Input('altura') altura: number;
                        @Input('largura') largura: number;


    ngAfterViewInit() {

        self = this;

        this.canvas = this.canvasRef.nativeElement;
        this.ctx= this.canvas.getContext('2d');
        this.canvas.width = this.altura;
        this.canvas.height = this.largura;

        this.desenhaPaletaDeCores(); 

        this.canvas.onclick = this.selecionaCor;

        this.canvas.onmousemove = this.lidaComMovimentoDoMouse;
        this.canvas.onmousedown = this.habilitaDesenhar;
        this.canvas.onmouseup = this.desabilitaDesenhar;

        this.desenhaLinha(100,150,200,200);
        this.desenhaLinha(200,200,300,200);
        this.desenhaLinha(300,200,400,130);



    }

    desenhaLinha(x,y,x1,y1){
        this.ctx.fillStyle = 'blue';
        this.ctx.moveTo(x,y);
        this.ctx.lineTo(x1,y1);
        this.ctx.stroke();
    }
    desenhaRetangulo(x , y , largura, altura, cor){
                this.ctx.fillStyle = cor;
                this.ctx.fillRect(x,y,largura,altura);
                this.ctx.fillStroke = 'black';
                this.ctx.strokeRect(x,y,largura,altura);
     }
    desenhaTexto(x, y, texto){
            this.ctx.font='15px Georgia';
            this.ctx.fillStyle='black';
            this.ctx.fillText(texto, x, y);  
     }
    desenhaQuadrado(x,y,tamanho,color){
        let tela = this.canvas;
        var ctx = tela.getContext('2d');    
                ctx.fillStyle = color;
                ctx.fillRect(x,y,tamanho,tamanho);
                ctx.fill();
                ctx.fillStroke = 'black';
                ctx.strokeRect(x,y,tamanho,tamanho);
     }
    desenhaCirculo(x, y , raio, cor){
        this.ctx.fillStyle = cor;
        this.ctx.beginPath();
        this.ctx.arc(x,y,raio,0,2*3,14) ;
        this.ctx.fill();
    }
    desenhaPaletaDeCores(){
        this.desenhaQuadrado(self.xVermelho,self.yQuadrados,self.tamanhoQuadrados, 'red');
        this.desenhaQuadrado(self.xVerde, self.yQuadrados, self.tamanhoQuadrados, 'green');
        this.desenhaQuadrado(self.xAzul, self.yQuadrados, self.tamanhoQuadrados, 'blue');

    }
    lidaComMovimentoDoMouse(evento){
        let x = evento.pageX - this.offsetLeft;
        let y = evento.pageY - this.offsetTop;


         if(self.desenha && self.podeDesenharNaArea(x,y) ){
                 self.desenhaCirculo(x,y,5,self.corAtual);
         }
    }
    habilitaDesenhar(){
        self.desenha = true;
    }
    desabilitaDesenhar(){
        self.desenha = false;
    }
    podeDesenharNaArea(x,y){
        if(x>0 && x<600 && y>0 && y<80){
            return false;
        }else{
            return true;
        }
    }
    selecionaCor(evento){
        let x = evento.pageX - this.offsetLeft;
        let y = evento.pageY - this.offsetTop;

             if(x > self.xVermelho && x < self.xVermelho + self.tamanhoQuadrados
                && y > self.yQuadrados && y < self.tamanhoQuadrados) {

            self.corAtual = 'red';
            console.log(self.corAtual);



        } else if(x > self.xVerde && x < self.xVerde + self.tamanhoQuadrados
                && y > self.yQuadrados && y < self.tamanhoQuadrados) {

            self.corAtual = 'green';
            console.log(self.corAtual);

        } else if(x > self.xAzul && x < self.xAzul + self.tamanhoQuadrados
                && y > self.yQuadrados && y < self.tamanhoQuadrados) {

            self.corAtual = 'blue';
            console.log(self.corAtual);
        }


    }

}