How to download a image that's on HTML5 canvas?

Question

I wrote this webRTC app which takes photos with different filters added onto it. When I click on the click button, the frame from the webRTC video feed is loaded onto the canvas

Answer 1

You can do this by using the .toDataURL() method on the canvas element. And then apply this to the download attribute to an tag. We can add an anchor tag around the image:

Now for the clicking on the canvas, we adjust the download and href of the parent:

$('#canvas').click(function(){
     $(this).parent().attr('href', document.getElementById('canvas').toDataURL());
     $(this).parent().attr('download', "myPicture.png");    
});

Here is an example