You can remove all margins using CSS, and then set the canvas width and height to 100%. It's not complicated.

The problem is resizing. If you resize the browser window, what then? You can detect the resizing, destroy and create a new canvas and restart the program, or just ignore the resizing. Both solutions are kinda ugly. Flash was able to do this very nicely, but it's harder in JS.

Maybe one could simulate the Flash behaviour by creating a huge canvas which is larger than the screen, and then centering it on real time using JS. But I wonder how slow such a huge canvas would be. It should be at least 1920x1200 or larger if you want to cover the latest large monitors.

a

This solution works well if you aren't using 3D:  http://archive.anthonymattox.com/2007-2011-blog/index.html%3Fp=2980.html

@digitaltembo
I mentioned making it larger than the screen thinking of "one size fits all", but you are right: if you first check the screen size, then make the canvas that size, the window should never get larger than that.

It would still be a good idea to listen to window resize events and notify P5, so P5 can scale() the graphics without the need of calling size() again. This should work even with P3D.

I wonder if there are benchmarks about using a huge canvas while drawing only on limited areas of that canvas...
Some of these tips for canvas may apply: http://www.html5rocks.com/en/tutorials/canvas/performance/
For example, avoid redrawing the whole thing on each frame if possible.

really thanks for the info guys.

or instead of using JQuery:

Looks great! And happy that I inspired something :)

One thing I would do is scale horizontally and vertically using the same value to avoid distortion. If you now make the window square, the text is distorted.

I will try do that and post the code.