download.html<\/div>\n
<!-- (A) DRAW DUMMY CANVAS -->\r\n<canvas id=\"demo\" width=\"200\" height=\"200\"><\/canvas>\r\n<script>\r\nlet ctx = document.getElementById(\"demo\").getContext(\"2d\");\r\nctx.fillRect(30, 30, 50, 50);\r\nctx.fillRect(120, 30, 50, 50);\r\nctx.beginPath();\r\nctx.moveTo(10, 120);\r\nctx.bezierCurveTo(10, 180, 190, 180, 200, 120);\r\nctx.stroke();\r\n<\/script><\/code><\/pre>\nWell, nothing much to see here. Just generating a dummy “smiley face” on the HTML canvas.<\/p>\n
<\/p>\n
<\/div>\n
<\/p>\n
STEP 2) “FORCE” CANVAS DOWNLOAD<\/span><\/h3>\ndownload.html<\/div>\n
<!-- (B) GENERATE DOWNLOAD LINK -->\r\n<input type=\"button\" value=\"JPG\" onclick=\"candown('demo', 'jpg')\">\r\n<input type=\"button\" value=\"PNG\" onclick=\"candown('demo', 'png')\">\r\n<input type=\"button\" value=\"GIF\" onclick=\"candown('demo', 'gif')\">\r\n<input type=\"button\" value=\"WEBP\" onclick=\"candown('demo', 'webp')\">\r\n<script>\r\nfunction candown (target, type) {\r\n \/\/ (B1) GET CANVAS\r\n let canvas = document.getElementById(target);\r\n \r\n \/\/ (B2) CREATE LINK\r\n let anchor = document.createElement(\"a\");\r\n anchor.download = \"download.\" + type;\r\n anchor.href = canvas.toDataURL(\"image\/\" + type);\r\n \r\n \/\/ (B3) \"FORCE DOWNLOAD\"\r\n anchor.click();\r\n anchor.remove();\r\n \r\n \/\/ (B4) SAFER ALTERNATIVE - LET USER CLICK ON LINK\r\n \/\/ anchor.innerHTML = \"Download\";\r\n \/\/ document.body.appendChild(anchor);\r\n}\r\n<\/script><\/code><\/pre>\nThis is pretty much doing the same stuff in the introduction snippet, but packaged into a function for your convenience:<\/p>\n
\n- (B1)<\/strong> Get the HTML canvas.<\/li>\n
- (B2)<\/strong> We create an HTML anchor link in Javascript –
var anchor = document.createElement(\"a\")<\/code><\/li>\n- (B2)<\/strong> Set the “download as” filename –
anchor.download = \"image.png\"<\/code><\/li>\n- (B2)<\/strong> The magic happens when we do
anchor.href = canvas.toDataURL(MIME-TYPE)<\/code>. Yes, this sets a base 64 encoded data URL to it.<\/li>\n- (B3)<\/strong> So-called “force download”. Take note, this trick may not work on all browsers – Some may not allow
click()<\/code> on a link due to security settings.<\/li>\n- (B4)<\/strong> The safer way is to attach the download link to the page itself –
document.SOMEWHERE.appendChild(anchor)<\/code><\/li>\n<\/ul>\n <\/p>\n
<\/div>\n
<\/p>\n
\n
DOWNLOAD & NOTES<\/h2>\n
![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-download.svg\")
<\/p>\n
Here is the download link to the example code, so you don’t have to copy-paste everything.<\/p>\n<\/div>\n
<\/p>\n
![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-gear.svg\")
JS Download Canvas<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-plus-square.svg\")
Extra Bits & Links<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-thumbs-up.svg\")
The End<\/a><\/div>\n<\/div>\n