I'm very new to canvas and Fabric.js. I follow some tutorial and now can add image to canvas. but have no idea how to remove it. by clicking a button

HTML

<div id="container">
   <input type="file" id="imageLoader" name="imageLoader" />
   <input type="button" id="imageRemove" name="imageRemove" />
   <canvas id="canvas" width="400" height="400" style="width:400px;height:400px" ></canvas>

JS

var canvas = new fabric.Canvas('canvas', {
    backgroundColor: 'rgb(240,240,240)'
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var img = new Image();
    img.onload = function () {
        var imgInstance = new fabric.Image(img, {
            scaleX: 1,
            scaleY: 1
        })
        canvas.add(imgInstance);
    }
    img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

var imageRemove = document.getElementById('imageRemove');
imageLoader.addEventListener('change', handleRemove, false);

function handleRemove(e) {
   canvas.remove(canvas.getActiveObject());
}

Edit:

Here is Jsfiddle

I'm very new to canvas and Fabric.js. I follow some tutorial and now can add image to canvas. but have no idea how to remove it. by clicking a button

HTML

<div id="container">
   <input type="file" id="imageLoader" name="imageLoader" />
   <input type="button" id="imageRemove" name="imageRemove" />
   <canvas id="canvas" width="400" height="400" style="width:400px;height:400px" ></canvas>

JS

var canvas = new fabric.Canvas('canvas', {
    backgroundColor: 'rgb(240,240,240)'
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var img = new Image();
    img.onload = function () {
        var imgInstance = new fabric.Image(img, {
            scaleX: 1,
            scaleY: 1
        })
        canvas.add(imgInstance);
    }
    img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

var imageRemove = document.getElementById('imageRemove');
imageLoader.addEventListener('change', handleRemove, false);

function handleRemove(e) {
   canvas.remove(canvas.getActiveObject());
}

Edit:

Here is Jsfiddle

• javascript
• html
• canvas
• fabricjs

• could you make quick fiddle? – Amy Commented Nov 8, 2014 at 9:42
• Done! Fiddle above. @Amy – Expl0de Commented Nov 8, 2014 at 9:49
• Click event on remove button is not working – Amy Commented Nov 8, 2014 at 9:57
• you are giving to imageLoader 2 different functions on change. the second function should be for imageRemove on click – user2755150 Commented Nov 8, 2014 at 10:01
• @Expl0de Please refer my posted answer – Amy Commented Nov 8, 2014 at 10:10

1 Answer 1

You can use clear() for clearing the canvas object and use renderAll() for redraw the given canvas.

Try This Code:

DEMO

HTML:

    <div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
    Remove:<input type="button" value="remove" id="imageRemove" name="imageRemove" onClick="handleRemove()"/>
    <canvas id="canvas" width="400" height="400" style="width:400px;height:400px" ></canvas>

JS Code:

var canvas = new fabric.Canvas('canvas', {
    backgroundColor: 'rgb(240,240,240)'
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var img = new Image();
    img.onload = function () {
        var imgInstance = new fabric.Image(img, {
            scaleX: 1,
            scaleY: 1
        })
        canvas.add(imgInstance);
    }
    img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

//var imageRemove = document.getElementById('imageRemove');
//imageLoader.addEventListener('change', handleRemove, true);

function handleRemove() {
canvas.clear().renderAll(); // Here is your clear canvas function
}