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.