High-Resolution HTML5 Canvases

You can make your canvases as high-res as the user’s computer can stand. I’ve recently used canvases of size 12000×6750 to create bitmaps that, when printed at 200dpi, which is sufficient for very high quality, would print a 60″x34″ print.

It’s very simple to do. The key is this. The CSS width and height values of a <canvas> determine only the size the canvas appears on the screen. The width and height attributes of the <canvas>, on the other hand, determine the size of the canvas that you work with in your JavaScript code. 

In the below code, the canvas appears on the screen to be 80×300, but if you use toDataURL to capture a jpg or png image of the canvas, it will be 1000×500.

<canvas width="1000" height="500" style="width:80px;height:300px;border:1px solid black;"></canvas>

Aleph Null 3.1 and later versions of Aleph Null support creating high-res work, as you can see in a tutorial video on the matter

Comments are closed.