Printing canvas images with variable background colours
Thursday, 13. August 2009, 22:24:55
Ah, the virtues of Canvas. Get me talking.
Or rather, don't. I've been busting my ass 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. The new ones, that is, not the ones you will find in the application as we speak.
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 data:uris. Firefox and Chrome lack that problem. It took Opera a good 5 minutes to spool a 60KB data:uri. A bug report was filed.
3. Google Chrome thinks a data:uri is a violation of cross-domain access security. Since 'data:something...' 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. 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.
Or rather, don't. I've been busting my ass 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. The new ones, that is, not the ones you will find in the application as we speak.
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 data:uris. Firefox and Chrome lack that problem. It took Opera a good 5 minutes to spool a 60KB data:uri. A bug report was filed.
3. Google Chrome thinks a data:uri is a violation of cross-domain access security. Since 'data:something...' 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. 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.
WIDGETIZE