Context.drawImage not working after image.onload - html

Question

I'm trying to build a free hand drawing application using the html canvas element , and so i'm trying to implement the 'Undo' feature which basically takes a snapshot of the current state of the canvas and then saves it on a list of some sort when the user draws something on the canvas, and when the user presses the undo button it pops the last state saved and draws in onto the canvas . I've tried calling context.drawImage() after image.onload as shown but still no use.
export class WhiteboardScreenComponent implements OnInit, AfterViewInit {
#ViewChild('myCanvas')
myCanvas: ElementRef<HTMLCanvasElement>;
painting: boolean = false;
strokeWidth: number = 2;
strokeColor: string = this.colors[this.selectedColor];
lineStyle: CanvasLineCap = 'round';
ctx: CanvasRenderingContext2D;
undoHistory: any[] = [];
constructor() { }
ngOnInit(): void { }
ngAfterViewInit(): void {
this.ctx = this.myCanvas.nativeElement.getContext('2d');
this.resizeCanvas();
this.myCanvas.nativeElement.addEventListener('mousedown', this.startPainting);
this.myCanvas.nativeElement.addEventListener('mouseup', this.finishPainting);
this.myCanvas.nativeElement.addEventListener('mousemove', this.draw);
}
startPainting = (e) => {
this.painting = true;
this.ctx.beginPath();
this.ctx.moveTo(e.clientX, e.clientY);
}
//saving the state of the canvas here
finishPainting = (e) => {
let src = this.myCanvas.nativeElement.toDataURL("image/png");
this.undoHistory.push(src);
this.ctx.closePath();
this.painting = false;
}
draw = (e) => {
if (!this.painting) return;
this.setProperties();
this.ctx.lineTo(e.clientX, e.clientY);
this.ctx.stroke();
}
setProperties(): void {
this.ctx.lineWidth = this.strokeWidth;
this.ctx.lineCap = this.lineStyle;
this.ctx.strokeStyle = this.strokeColor;
}
//fetching the last saved state and drawing it onto the canvas
undo(): void {
if (this.undoHistory.length > 0) {
let image = new Image();
image.onload = () => {
this.ctx.drawImage(image, 0, 0);
};
image.src = this.undoHistory.pop();
}
}
}

Answer 1

Before calling the drawImage() method, you're supposed to clear the screen , that can be accomplished by simply resizing the canvas to re-draw it, or calling clearRect().