Printing HTML5 canvas images with variable background colours - ΩJr. Software Articles and Products

This information lives on a web page hosted at the following web address: 'https://omegajunior.globat.com/code/'.

When the image you wish to print can be given different background colours, draw them using Canvas drawing techniques. Cause and solution for that and related problems.

A.E.Veltstra
Thursday, August 13, 2009

Ah, the virtues of Canvas. Get me talking. Or rather, don't.

I've been working hard the past couple days to get the save and print functions to work in my Canvas Composition Studio, the very first implementation of the Canvas element of its kind in the entirety of the internet.

I learned many a new thing trying to get these functions to work. That's why I love programming: I keep on learning. Every day is a surprise.

A listing:

1. When opening a url using javascript:window.open(), some browser implementations (Opera, Firefox, Chrome) don't wait for the new window to finish loading before returning to resume the programming logic. This race condition is particularly tricky if you want to use that new window and its contents.

When is it loaded? Not all browsers implement a ready-state. Do I wait? How long do I wait? Can I safely assume the new url will be loaded within my waiting time?

So I had to turn the logic around and work with a call-back method, a pattern I already use heavily in the rest of that application. I prefer call-back methods over 'regular' ajax, whenever I control both the caller and the called.


2. Opera 10 doesn't like to print. Firefox and Chrome lack that problem. It took Opera a good 5 minutes to spool a 60KB image. A bug report was filed.


3. Google Chrome thinks #1 is a violation of cross-domain access security. Since '...' does not equal 'http:// www.someth.ing/', Chrome thinks the two stem from different domains. Try manipulating that in iframes, ajax, and other similar constructions.


4. Most browser implementations (Opera, Firefox, Google Chrome, Internet Explorer) do provide a print method that is accessible by javascript, but not a save method. (In this case it doesn't matter for Internet Explorer since it doesn't support Canvas.toDataURI(), since it doesn't support Canvas, but it's the principle that counts). So why the one, but not the other?


5. When the canvas image you wish to print can be given different background colours, instead of attributing those colours to a style setting, draw them using Canvas drawing techniques. Why? Because whether or not the background colour gets printed, in most browsers depends on a user setting. In some browsers this setting is hard to find, if not impossible.

In Opera 10, if the background colour is omitted, and the base canvas picture happens to contain an alpha transparent gradient, you will find most of the picture shows up posterized white and black. A bug report was filed.


I'll be working on Canvas implementations for a while. I'm looking forward to get my hands on the 3D-context.

Need problem solving?

Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.