How to clear a canvas containing an image?

Question

I'm having an issue with my canvas. I have a webpage that allows me to take a picture with my camera and then display it into a canvas. This part works fine, but I want to be able to clear the canvas on a button click.

I tried a few ways to do it, as you can see in this fiddle in the function ag_pub_clear_photo

here are the 3 ways I tried : (ag_photo_picture is the id of my canvas

1) $('#ag_photo_picture').clear();

2) context.clearRect(0, 0, canvas.width, canvas.height);

3) var canvas = $('#ag_photo_picture')[0]; canvas.width = canvas.width;

No matter which way I try, it always seems like nothing is happening and I don't understand why or what I am doing wrong.

I'd like to precise that by "clearing" canvas, I want it to be blank/invisible like at the beginning, before touching any button.

Edit : Seems like my clear function is being called at the load off the page, and not when I click the button

Answer 1

感谢azs06，这是答案：

$('#ag_photo_clear_button').on('click',ag_pub_clear_photo);