Angular6 - canvas.drawImage() not working

Question

I want to put image on canvas. initially I used image as background. But whenever I convert canvas to image, background image is not getting copied. Hence I tried to draw image on canvas. I am choosing image from device image gallery. Storing the image url as string and passing to next component. I checked, able to get the value. Please see below code and let me know what I did wrong.

1. HTML

<canvas no-bounce id="canvas"
    (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' (touchend)='handleEnd($event)' (click)="removeSelectedTxt()"
    [ngStyle]="{
    'width': '98%',
    'height': '65%'}" #canvas ></canvas>

2. ts file

@ViewChild('canvas') public canvas: ElementRef;

ionViewDidLoad() {
   console.log('ionViewDidLoad ImageHomePage');
    this.canvasElement = this.canvas.nativeElement;
    this.ctx = this.canvasElement.getContext('2d');
    let image = this.renderer.createElement('img');
    image.src = this.selectedImage;
    this.ctx.drawImage(image,10, 10, this.canvasElement.width, 
    this.canvasElement.height);
}

I used another way also...

Method 2-

ionViewDidLoad() {
    // this.selectedImage = this.route.snapshot.params['id'];
    console.log('ionViewDidLoad ImageHomePage');
    let canvasID= document.getElementById("canvas") as HTMLCanvasElement; 
    let canvasContext = canvasID.getContext("2d");
    this.canvasElement = this.canvas.nativeElement;
    this.ctx = this.canvasElement.getContext('2d');
    let image = new Image() as HTMLImageElement;
    image.onload = function() {
      canvasContext.drawImage(image, 0, 0, canvasID.width, canvasID.height);
    }
    image.src = this.selectedImage;
}

May I know, what am I doing wrong? I know this question has been asked so many times, I tried the methods but none of them worked for me.. Hence asking the question, might be others will face issue in future..

Don't know ionic, so there might be something from there, but your first try will indeed fail since you are not waiting for the image has loaded before drawing it. You could remove it from your Question. The second try on the other hand and from a purely canvas API point of view should work. What I would suspect is that your image fails to load the media at the provided URI. You could add an `image.onerror = console.error` to ensure this. — Kaiido, Aug 07 '18 at 06:32
Hey @Kaiido.. When I debugged it, it's not giving error.. It will execute image.onload function but still not able to see image on canvas.. May I know is it due to what? Because I am not able to get error also. — Flutterian, Aug 07 '18 at 06:44
Is `this.selectedImage` a valid URL? I suspect that's what's causing the issue — Horace Lee, Aug 09 '18 at 08:03
In case of 2nd method, do you get any error for `document` ? As far as I understand, you can't directly access DOM. You need to import `DOCUMENT` from `@angular/common` and then inject it via constructor. — AdityaParab, Aug 09 '18 at 08:04
@MThomas - Yes.. I checked already.. even path giving local path also it's not working — Flutterian, Aug 09 '18 at 08:51
Can you please test the images source from an existing image and refer with @ViewChild? — M Thomas, Aug 09 '18 at 09:07
It might be wrong image size. Are you taking into account devicePixelRatio? — Observer, Aug 10 '18 at 15:54

score 2 · Accepted Answer · answered Aug 14 '18 at 13:07

Finally I solved issue..

I added Renderer 2..

Below is my code..

I called below function in ionViewDidload()

let newImg = this.renderer.createElement('img');
newImg.src = this.selectedImage;
newImg.onload  = this.drawImg(newImg);

drawImg(imgContext){
    console.log('drawImg called');
    setTimeout(() => {
      this.ctx.drawImage(imgContext,0,0, this.canvasElement.width, this.canvasElement.height);
    }, 1000);

  }

I called setTimeout because it was taking time. Without setTimeout it wasn't showing any thing.

Angular6 - canvas.drawImage() not working

1 Answers1

Linked