P5 Canvas size vs HTML Canvas size

tsar

I have a problem about saving canvas as image. Consider the following simple code, it simply creates a canvas and save the canvas as "image.png". It is out of expectation that the result image's width and height is 3 times of the canvas, giving an image of dimension 960x720.

var cnv;
function setup()
{
    cnv=createCanvas(320,240);
    background(0);
    fill(255);
    text("Hello World", 160, 120);
    save("image.png");
}

My programming envirnoment is Android Chrome, Android 7.0

After further investigation, I found out that the size of canvas generated from createCanvas() is not equal to the canvas under HTML DOM.

console.log("createCanvas(): "+ cnv.width + ", " + cnv.height); 
// size is 320, 240

console.log("HTML DOM canvas: "+ cnv.canvas.width + ", " + cnv.canvas.height); 
// size is 960, 720

kfrajer

https://p5js.org/reference/#/p5/save

Would this do the trick for you?

// Saves canvas as an image
var cnv = createCanvas(100, 100);
save(cnv, 'myCanvas.jpg');

Kf