Change default name for right-click "Save image as..."

p5.js Beginners
1

In Firefox, a p5 canvas can be saved with right click and “Save image as…”. The default name it gives is canvas.png. I know I could use saveCanvas(), but I’d like to use the native browser menu. Is there any way to set the filename from p5? I am using instance mode, so maybe it is read from some property of the p5 constructor?

2

Well, I went to Mozilla’s reference for tag <canvas> here:

There’s an example there, a 300x300 canvas w/ a 100x100 green square, which has been created by JS code alone w/o using any libraries.

I’ve made some changes to it so we can paste the code on any browser console:

var canvas = document.createElement('canvas');
canvas.width = canvas.height = 300;
canvas.style.backgroundColor = 'lightgray'

var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

document.body.appendChild(canvas);

If I right-click it on any Firefox-based browser and choose “Save Image As…”, default filename is always “canvas.png”.

And for Chrome-based browsers, default filename is “download.png” instead.

So it doesn’t seem we have any control of it programmatically.

That’s a browser’s user-side feature, not JS.

Maybe browsers may let us create some addon which could modify that default behavior.

But this addon option would need to be installed by the browser’s user, of course.

2 Likes
3

I’ll think about other options, then. Thank you!