Skip to content

How to save a HTML5 canvas as a downloaded image and name the file

October 27, 2014

I had been trying to find a way to save a HTML5 canvas object as an image but also to nbame it to your preference which was not an easy find on the web to do. Luckily I have found something in Chrome that can do this by saving the file as an PNG of the selected HTML5 canvas but also to name the file as test.png

Here’s how: –

        var ua = window.navigator.userAgent;
        if (ua.indexOf("Chrome") > 0) {
            // save image without file type
            var canvas = document.getElementById("canvas");
            document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            // save image as png
            var link = document.createElement('a');
   = "test.png";
            link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;
        else {
            alert("Please use Chrome");

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: