Could use some help with HTML/CSS for Retina display in Canvas (Processing.js)

chrisjmears · March 2014

Hello all, Im looking for some help on what should be a very simple problem. I have an application which looks great in the desktop version of processing using size(320, 460, "processing.core.PGraphicsRetina2D")

When I move it to processing.js it looks very fuzzy. I've been and looked all over the web and read all about pixel ratios and webkitbackingstore, and the solution seems very simple. scale the canvas up and let CSS scale it back down again.

http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Sites like this were very useful, however they do tend to assume you can translate the advice they are giving into your own HTML and CSS.

Heres the rub. Processing was supposed to be developed to help among others artists etc without needing to learn a massive amount of other stuff about programming.

I only want to program in processing. I have seen enough people doing stuff with

and CSS to know its absolutely not for me. (I have to put a limit on the project sometime, otherwise I will never get finished)

So my question is, is there any kindly and knowledgable person out there who can take a look at my simple index.html and put the right code in there so it will look nice on a retina display? It would be a helpful resource for others in the future.

<!DOCTYPE html manifest="cache.appcache"> <!We may need to add AddType text/cache-manifest .appcache to apache server config or .htaccess>

    <title>My Solar Monitor</title>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <link rel="apple-touch-startup-image" href="\startup.png"/>

    <style type="text/css">
    body
    {
        margin: 0;
    }
    </style>

    <script src="processing-1.4.1.min.js" type="text/javascript"></script>
    <script src="processing.video.js" type="text/javascript"></script>
</head>
<body>
    <div id=“content”>
        <div>
            <canvas id="SerialMonitorv101e" data-processing-sources="Serial_Monitor_v1_01e.pde"width="320" height="460"></canvas>
        </div>
    </div>
</body>

davidchatting · April 2014

Hi - I've the same problem - did you find a solution?

Dave

GoToLoop · April 2014

src="processing-1.4.1.min.js"

Processing.JS is very old and much probably doesn't have any Mac Retina renderer and such! (~~)

There is a newer version now -> 1.4.7. It's worth a try, don't you think? >-)

processingjs.org/download/

velvetkevorkian · April 2014

If I read that correctly, this isn't a CSS issue — there's no way to tell the browser to do this automatically. You need to render the pjs sketch at double size (probably drawing to a PGraphics) then scale that down to fit your sketch size. This is the same technique that's used for rendering images bigger than your screen in "classic" Processing. The stuff with devicePixelRatio and backingStoreRatio in the HTML5Rocks article is just to check when you need to do so, to avoid wasting resources.

Howdy, Stranger!

Categories

In this Discussion

Could use some help with HTML/CSS for Retina display in Canvas (Processing.js)

Answers