Search code examples
angularcanvaspixeldrawimage

Angular 2 Canvas Pixeled DrawImage

Hello I have the following issue with angular 2 using Canvas, I'm trying to paint an image but it shows Pixeled and I dont know why.

I tried changed the Size and resolution of the image and it still not working, then I think taht I don't have the correct code implementation.

HTML CODE

<canvas #myCanvas style="width:100%" >
</canvas>
<img #spaceshipimg class="imageLoader" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/kspaceduel.png" alt="The Spaceship">

TypeScript CODE

import { Component, ViewChild, ElementRef,  AfterViewInit } from '@angular/core';
    @Component({
    selector: "canvas-component"
    ,templateUrl: "../common/canvas.template.html"    
})

export class CanvasScene implements AfterViewInit{
//Load

@ViewChild('myCanvas') canvasRef: ElementRef;
@ViewChild('spaceshipimg') spaceshipAlly: ElementRef;   

ctx: CanvasRenderingContext2D;

ngAfterViewInit(): void {
    this.ctx  = this.canvasRef.nativeElement.getContext('2d');       
    this.paint(this.ctx);
}

paint(ctx) {       

    ctx.drawImage(this.spaceshipAlly.nativeElement, 0, 0,50,50);

    setTimeout(() => 
    {
        this.paint(ctx);
    },
    300);
}
}

enter image description here

Solution

  • I found the solution, the problem was the canvas element style:width you most use a statical W and H here the Example.

    WRONG

    <canvas #myCanvas style="width:100%" >
</canvas>

    CORRECT

    <canvas #myCanvas width="1900" height="1900">
</canvas>