Saving a canvas object as an image - Black background
===

This is a slightly frustrating problem. I am using a third party library called Javascript InfoVis Toolkit to generate a canvas image chart.

So the chart is built and is inserted into a canvas. The background of that image is white (like styled in css), but when I convert the image (I've tried different libraries and opening a new window all together) it is black.

	<script type="text/javascript">
		function saveImage(div_id) {

			var canvas = document.getElementById("chart2-canvas");
			Canvas2Image.saveAsJPEG(canvas);
		}
	</script>

    <script type="text/javascript">
		function init(jsonString, num){

			var json = jsonString
			var inj = 'chart' + num
			
			var st = new $jit.ST({
				injectInto: inj,
				offsetX:25,
				offsetY:900,
				transition: $jit.Trans.Quart.easeInOut,
				orientation: 'top',
				Node: {
					height:100,
					width:100,
					type: 'rectangle',
					color: '#EEE',
					overridable: true
				},
				Edge: {
					type: 'line',
					color: '#512',
					overridable: true
				},
				Label: {
					type: 'Native',
					color: '#000000'
				},
				Tips: { 
					enable: false,
					onShow: function(tip, node, isLeaf, domElement){
						var html = "<p><b>" + node.name + "</b></p><br/>";
						var data = node.data
						
						if(data.image) {
							html += "<img src=\""+ data.image +"\" width=50 height=65  class=\"album\" />";
						}
						if(data.email) {
							html += "<p>"+data.email+"</p>";
						}
						if(data.title) {
							html += "<p>"+data.title+"</p>";
						}
						if(data.phone) {
							html += "<p>"+data.phone+"</p>";
						}
						tip.innerHTML = html; 
					}     	
				}/*, 
				onCreateLabel:function(label,node) {
					alert(node.name);
					alert(node.data);
					var html = "<b>" + node.name + "</b>";
					var data = node.data;
					
					if(data.title) {
						html += "<br/><br/><i>" + data.title + "</i>";
					}
					
					label.id = node.id + "_" + num;
					label.innerHTML = html;
					
					var style = label.style;
					style.width = 100 + 'px';
					style.height = 100 + 'px';
					style.cursor = 'pointer';
					style.fontSize = '0.8em';
					style.textAlign = 'center';
					style.color='#321';
				}*/
			});
			
			st.loadJSON(json);
			st.compute();
			st.onClick(st.root);

		}
	</script>

	<a href="#" onclick="javascript:saveImage('chart1');">Save Image</a>
	
	<g:each in="${allJSON}" status="h" var="jsonInstance">
		<div id="chart${h+1}">
			<script type="text/javascript">
				init(${jsonInstance}, ${h+1});
			</script>
		</div>
	</g:each>

To recap:

1) I generate the charts in the code, all of which have a white background (which is right)
2) I save the image of the chart 2 (as a test), but the image that is saved is BLACK - apparently ignoring the canvas background.

Thanks for all help!