How to remove the image from the canvas?

Question

When I upload an image, it will display in the canvas. In this image, i can make changes. Now If I try to upload new image, I want to remove the previous image and display the new one. I have tried following lines for code. But it is not clearing the canvas. Instead new images are coming on top of the previous one.

document.getElementById('input-image-file').addEventListener("change", function (e) {
    for (var i = 0;i < e.target.files.length;i++) {
        var file = e.target.files[i];
        var reader = new FileReader();

        reader.onload = function (f) {
            var data = f.target.result;

            clearCanvas();

            fabric.Image.fromURL(data, function (img) {
                var oImg = img.set({left: 100, top: 50, angle: 0,}).scale(0.9);

                canvas.add(oImg);
                canvas.sendToBack(oImg);
                canvas.renderAll();
            });
        };
        reader.readAsDataURL(file);
    }
});

function clearCanvas()
{
    var c = document.querySelector("canvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(20, 20, c.width, c.height);
}

 // add image var canvas = new fabric.Canvas('c', { preserveObjectStacking: true, width: $("#c").width(), height: $("#c").height() }); document.getElementById('input-image-file').addEventListener("change", function (e) { for (var i = 0;i < e.target.files.length;i++) { var file = e.target.files[i]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; // canvas.clearRect(); fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 100, top: 50, angle: 0,}).scale(0.9); canvas.add(oImg); canvas.sendToBack(oImg); canvas.renderAll(); }); }; reader.readAsDataURL(file); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="btn-upload-img"> <i class="fas fa-plus"></i> <input type="file" accept="image/*" id="input-image-file" multiple> </div> <div class="image-canvas"> <div id="image-list"> </div> <div class="image-editors"> <canvas id="c" width="800" height="600"></canvas> </div> </div>

Answer 1

You'd need to clear upon each change all canvas' already created before recreating any more

document.getElementById('input-image-file').addEventListener("change", function(e) {
    canvas.clear()
    // your code here
});

 // add image var canvas = new fabric.Canvas('c', { preserveObjectStacking: true, width: $("#c").width(), height: $("#c").height() }); document.getElementById('input-image-file').addEventListener("change", function(e) { canvas.clear() for (var i = 0; i < e.target.files.length; i++) { var file = e.target.files[i]; var reader = new FileReader(); reader.onload = function(f) { var data = f.target.result; // canvas.clearRect(); fabric.Image.fromURL(data, function(img) { var oImg = img.set({ left: 100, top: 50, angle: 0, }).scale(0.9); canvas.add(oImg); canvas.sendToBack(oImg); canvas.renderAll(); }); }; reader.readAsDataURL(file); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="btn-upload-img"> <i class="fas fa-plus"></i> <input type="file" accept="image/*" id="input-image-file" multiple> </div> <div class="image-canvas"> <div id="image-list"> </div> <div class="image-editors"> <canvas id="c" width="800" height="600"></canvas> </div> </div>