by Will Lesieutre

Responsive Canvas

Last demo left off with the drawing adjusting to the correct resolution every time that it’s drawn. But it was drawn manually with button clicks, and if the page size changed after drawing it stretched to the new size instead of staying sharp.

To work well on a responsive page, the canvas needs to update automatically when the window changes size. A resize event listener on the window object will suffice, but it fires repeatedly as the window size changes.

You can see this in action below. The number counts how many times the resize event occurs:


If the canvas is computationally expensive to draw, then it’s even more expensive to draw over and over as the window size changes. Better to let the image be upscaled until the resizing is done, then only redraw it once. A technique called “debouncing” will do just that.

Read More

Device Pixels

The previous post covered adjusting the canvas size to match how large it’s being drawn on the web page. And if you’re reading on a computer with a 1080p screen or similar, it looked pretty good. But ever since the iPhone 4 and its “retina display” stepped up the pixel density much higher than historical norms, there’s one more piece of this pixelation puzzle.

When Apple subdivided every pixel on their screen into two rows and two columns, they couldn’t treat these like normal pixels any more - an object on screen defined as 10 pixels wide would be only half its intended size if it were displayed using 10 of these tiny new pixels.

Instead, they used multiple physical pixels to make up each pixel of size defined in CSS or HTML, giving objects the same size as before but allowing for sharper detail. In those first retina screens they used 2 hardware pixels for every 1 pixel of a web page layout. That 2:1 ratio is called the “device pixel ratio,” and it tells us that the width and height of the canvas both need to be doubled to display a sharp image on that screen. Newer screens with even higher pixel densities have driven that up even further with a 3:1 ratio.

Read More

Canvas Resolution

In the first canvas demo, I showed a small canvas with its width and height attributes set to 200 pixels. What about a bigger canvas fitting the width of the page content?

Since the width of the content column will vary, setting the canvas element’s width attribute in pixels won’t work, I need a percentage size instead. CSS has this covered.

<canvas id="wideCanvas" style="width: 100%"></canvas>
Read More

Canvas Basics

I want to paint with javascript, so the first thing I need is a <canvas>. It’s an HTML element with a rendering context, and anything drawn in the rendering context is displayed inside the canvas element.

A canvas only needs a couple of properties: an id so that the element can be referenced from javascript, and a width and height so it knows how large it should be. Here’s a 200x200 square canvas:

<canvas id="firstCanvas" width="200" height="200"></canvas>
Read More

Welcome to will.institute

Will Lesieutre here with an exciting new website! What’s this about? It’s a place for me to work toward creating online VR experiences, because I’ve just gotten an Oculus Quest and I’d like to do more with it.

The Quest is limited in what it can run, with three paths for software distribution:

  1. Android apps that have been accepted into the tightly curated Oculus Store.
  2. Android apps distributed for sideloading, which will only be seen by users who have enabled developer options and signed up as an organization through Oculus’s Developer Portal.
  3. Websites with WebVR, for anyone to find through the Quest’s built-in web browser.

The last one is the way I’m headed, a route I hope will let me create anything from half-baked experiments to well polished experiences, and make them available to a wide audience.

JavaScript is new territory though, and will.institute will be home to a variety of experiments in web graphics as I figure it out.

Next up, a canvas tag and some simple drawing. Later, 3D and WebVR. Check back soon!