› › ›

Canvases automatically scale up

ShorukeShoruke
edited November 2017 in JavaScript Mode

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...)

Tagged:

Answers

  • jeremydouglassjeremydouglass

    Instead of your 3000 line sketch, have you tried a 10 line sketch with a colored box and some text? Does the same thing happen with that 10 line sketch?

  • ShorukeShoruke

    Yup. Here's a .pde file...

    size(1080, 800); background(0, 0, 200);

    and an .html file...

    <script type="text/javascript" src="processing-1.4.1.js"></script> <canvas data-processing-sources="Error_Test.pde"></canvas>

    And here's what happens. Here's the processing.js version, with the normal processing window in front of it for comparison.

  • kfrajerkfrajer

    All normal on my side using this code, tested on Edge first and then plain Java and on Win10 x64 OS:

    void setup() {
  size(1080, 800);
  fill(250,150,150);
  noStroke();
}

void draw() {
  background(0, 0, 200);
  ellipse(mouseX,mouseY,mouseX/10,mouseY/10);
  text(mouseX+" "+mouseY,width/2,height/2);
}

    HTML:

    <!DOCTYPE html>

<head>  

  <script type="text/javascript" src="processing.js"></script>
  <canvas data-processing-sources="demo.pde"></canvas>


</head>
<body>  
</body>

</html>

    Notice p.js version for me is:

    "name": "processing-js",
    "version": "1.4.13",
    "author": "Processing.js"

    Kf

  • jeremydouglassjeremydouglass
    edited November 2017

    @Shoruke - Perhaps a browser-specific 120% setting, e.g. View > Zoom in? If you test it on another browser on the same computer, does the same thing happen?

  • ShorukeShoruke

    The issue remains on other browsers. After fooling around with my browser's zoom, I... tripped over something weird? My laptop has two monitors. On my main monitor, the processing window is the correct size, but the browser canvas version is scaled up. On my second monitor, which is slightly smaller, the browser canvas version is the exact correct size and my processing window is smaller.

    I tested the exact size of things by taking a printscreen, pasting it into paint.exe, and cropping the picture.

    ..... So is the issue with my computer monitor settings? Somehow? How / why do they just "switch correctness" across monitors? :S

  • jeremydouglassjeremydouglass
    edited November 2017

    In that case it might be a system OS display setting or a monitor device driver setting. Does one of your monitors have a special high-def / retina mode, and the other one does not?

Sign In or Register to comment.