muonlab

It seems IE doesn’t print canvas elements which are absolutely positioned in the correct place. What a surprise.

This problem came about when i tried to print some of my jqPlot graphs, as it uses absolutely positioned canvas tags for the data and axes.

There’s probably a much easier solution to this, but i couldn’t find it.

Heres some mega-hax that makes things work:

Update: This requires jQuery 1.4.2+

(function($) {
	$.fn.CanvasHack = function() {
		var canvases = this.find('canvas').filter(function() {
			return $(this).css('position') == 'absolute';
		});

		canvases.wrap(function() {
			var canvas = $(this);
			var div = $('<div />').css({
				position: 'absolute',
				top: canvas.css('top'),
				left: canvas.css('left')
			});
			canvas.css({
				top: '0',
				left: '0'
			});
			return div;
		});

		return this;
	};
})(jQuery);

Call it after your graph setup code, like this:

$('body').CanvasHack();