how to render smothly P5.js in hdpi screen?

Question

Computer with hdpi screen are more and more common and I own one.
I'm building a webpage with a P5.js canvas inside it filling a div. I have absolutely no problem till this point, but as I have an hdpi screen the number of pixels to render is tremendous and it's very hard to render smoothly.

what I would like to do: render a low-resolution canvas an stretching it to fill all the space. But I have no ideé how to achieve this or even if it's possible.

function setup() {
    var canvasDiv = document.getElementById('myCanvas');
    var divWidth = canvasDiv.getBoundingClientRect().width;
    var divHeight = canvasDiv.getBoundingClientRect().height;
    var sketchCanvas = createCanvas(divWidth,divHeight);
    sketchCanvas.parent("myCanvas");

    background(0)

   
}
function windowResized() {
  	var canvasDiv = document.getElementById('myCanvas');
    var divWidth = canvasDiv.getBoundingClientRect().width;
    var divHeight = canvasDiv.getBoundingClientRect().height;
    resizeCanvas(divWidth, divHeight);

     background(0)
}



function draw(){
	
  
 
}

Answer 1

Step one: Create an off-screen buffer using the createGraphics() function. More info can be found in the reference. Give it whatever low-res size you want.

Step two: Draw your scene to that off-screen buffer. Use its width and height to draw stuff to scale.

Step three: Draw the off-screen buffer to the screen, using the image() function, which takes parameters for the size to draw. Use the size of the canvas as the arguments. Again, more info can be found in the reference.

You'll still be drawing the same amount of pixels, but that's how you'd draw to a small buffer and resize it to match the canvas size.

If you're still having trouble, please post a MCVE in a new question post, and we'll go from there. Good luck.