Saving a canvas object as an image - Black background

Question

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!

Answer 1

Are you sure the canvas doesn't have a transparent background? JPEGs don't support transparent backgrounds.

If it does have a transparent background, try drawing a white background on it first, then save it as a JPEG.