Override Save As Behavior On Html Canvas

As part of a data exploration tool I'm variously drawing PNG or SVG images to a canvas. That part works fine and I understand that once drawn to canvas the image is no longer in ve

Solution 1:

IMO, the best solution is still a "save" button.

Not many users will use the contextmenu to save an image if there is a blattant save next to it. For those who use the contextmenu, like most of us in here, this place is a safe place, where only our browser and us know what we're doing, with our well known features. If one day, one of these features is overridden by some website (and not just the whole menu replaced or blocked like it is on lot of websites), I'd feel trapped by the website. What else did it modified on my computer ? Is this safe place not so safe finally ? Does it know what I'd have lurk for ? If it did this to my context menu, can I trust the close button of my browser ?

---

But if you really want to do it, a workaround would be to place a transparent <img> with your "original" file over your canvas.

ori.onload = function() {
  var ctx = c.getContext('2d');
  // do some operation on the image
  ctx.arc(125,75,75,0,2*Math.PI)
  ctx.clip();
  ctx.drawImage(this, 0, 0, 250, 250);
};

#cont {
  position: relative;
}
#cont>img {
  position: absolute;
  opacity: 0;
  width: 250px;
  height: 250px;
  left: 0;
  top: 0;
}

Right click the image to save the original svg version

<divid="cont"><canvasid="c"width="250"height="250"></canvas><imgid="ori"src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Fiore_con_petali_arancioni_SVG.svg" /></div>