Selected Image Is Not Shown On Canvas

I am developing an app where user will get to choose image from the list of images that are provided. When user clicks on the image from the list, the selected image should be show

Solution 1:

I see two potential solutions to this:

• Delete the old canvas from the DOM (so you will only have the new one):

How to destroy / reload the canvas in html 5?

componentDidUpdate() {
    console.log('componentDidUpdate');
    // Get the old canvas and remove itvar oldCanvas = document.getElementById('canvas');
    oldCanvas = null;

    // Add your completely new canvasconst canvas = new fabric.Canvas('canvas');
    this.setCanvasBackground(this.props.getSelectedImage.selectedImage,      canvas);
}

• Clear the old canvas before redrawing the new one:

Redrawing Canvas in HTML5 using Javascript

To clear the canvas you need to do what was mentioned in the above link. If you are using this approach make sure not to add a new canvas to the page in componentDidUpdate().

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);

The link for the second solution specifically mentions that if you don't clear your canvas the drawn elements will stack.