cannot clear canvas with existing image

Question

I am trying to blank canvas when there is image already in it.

I want to remove old image and load new image that I am getting from var getfrontimage .

But It failed me.

    $('#fittocanvasfront').click(function () {
        var canvas = document.getElementById("canvas-front");
        var c = canvas.getContext("2d");
        var getfrontimage = $('#image-tocanvaschangefront').attr('src');

        var img = new resize(getfrontimage);
        function resize(src) {
            console.log('blank canvas');
            canvas.width = canvas.width;
            var image = new Image();
            image.src = getfrontimage;
            image.width = canvas.width;
            image.height = canvas.height;
            image.onload = function () {
                // clearing canvas
                c.clearRect(0, 0, canvas.width, canvas.height);
                //loading image
                c.drawImage(image, 0, 0);
                //creating a hole in canvas
                var centerX = canvas.width / 2;
                var centerY = canvas.offsetTop;
                var radius = 30;
                c.beginPath();
                c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
                c.fillStyle = 'black';
                c.fill();
            }
        }
    });

Into the script-

I have image in <img> tag-

   var getfrontimage = $('#image-tocanvaschangefront').attr('src');

this above image is what i will be using after clearing canvas.

So I tried doing canvas empty as below when image is being loaded-

 c.clearRect(0, 0, canvas.width, canvas.height);

But this didn't work, I tried doing canvas empty on click-

   $('#fittocanvasfront').click(function () {
            var canvas = document.getElementById("canvas-front");
            var c = canvas.getContext("2d");
            c.clearRect(0, 0, canvas.width, canvas.height);
              });

How do I empty this canvas with existing image in it.

Answer 1

What you are saying is not true. You can clear of any image using clearRect . Please see fiddle with your code where image's cleared on click.

$("#canvas-front").click(function(){
   c.clearRect(0, 0, canvas.width, canvas.height);
});

Hard to say what you're doing wrong, since you didn't provide the full code, use the code I provided in fiddle and all should be fine.