We are about to switch to a new forum software. Until then we have removed the registration on this forum.
I have a program with size(1080, 800), which should fit comfortably on my 1920x1080 computer screen, and it does when I run it as a processing program, but when I use processing.js to load it in a web browser, everything gets blown up by like 1.5x. It doesn't fit on my screen anymore and the text looks like garbage from the upscaling. At least all the visuals still line up properly and I can click things just fine, but why is it upscaled?
I've fiddled around with the HTML on the webpage I'm using, and forcing the canvas to be a different size does change it proportionally to the change, but not to the actual correct size. I made sure to reset my zoom in Firefox, so that's not it. The same thing happens in Chrome, too.
Here, have a picture of a processing program displayed over that same program in a web browser.
What causes this??? I'm not even 100% sure this is a problem with processing or processing.js, but I'm completely stumped. Is there a setting I've messed with in both Firefox and Chrome, somehow? Do web browsers just measure pixels differently from everything else on my computer? Is there some trick to the HTML5 canvas element I need to know? Whenever I try to Google this problem I get answers about How To Resize A Program, which I don't need.
(before anyone asks to see the source code, bear in mind it's some 3000 lines of code across 12 .pde files, with a 1.6MB data folder...)