Canvas background-color doesn't get applied to PNG image

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Anderson on 5th August 2014
I'm trying to make a graph that retrieves a png, but the problem is that the file downloaded is transparent in the gutter part of the graph (this is where my tick labels and titles are), even if I set background-color to the canvas element itself. How can I fix this?
Posted by Richard on 6th August 2014
I don't know what you're asking - do you want the background.image.x/y/w/z properties?

Posted by Anderson on 6th August 2014
I've made something like this, built a Gantt graph to show at my web page, and added the contextmenu, where you could right click and see the png image of the graph. When you right click the png image displayed and save it to download in my computer, this image has no background color, it's transparent, where the labels and titles are, just where the graph itself has background color. I read that the "set('background.color', '#F0F0F0')", just sets the color for the graph and that if I want to set a background color to the gutter, I had to set for the entire canvas by CSS, but that didn't work as well, this background color set by CSS don't apply for the png image.

<canvas id="canvas" width="890" height="300" style="background-color:#F0F0F0;">[No canvas support]</canvas>

var gantt = new RGraph.Gantt('canvas', data)
                                 .set('margin', 7)
                                 .set('xmax', 1440)
                                 .set('xmin', 0)
                                 .set('labels', ['label1', 'label2', 'label3', 'label4'])
                                 .set('background.color', '#F0F0F0')
                                 .set('background.grid.color', '#CCCCCC')
                                 .set('background.grid.autofit.numvlines', 24)
                                 .set('background.grid.autofit.numhlines', 7)
                                 .set('text.font', 'Helvetica')
                                 .set('title', 'Graph Title')
                                 .set('title.xaxis.numticks', 24)
                                 .set('contextmenu', [
                                     ['Get PNG', RGraph.showPNG],
                                     ['Cancel', function () {}]

Sorry if I wasn't clear, hope this time it's clear.
Posted by Richard on 6th August 2014
I see. You can have the background color set to white like this:

.on('beforedraw', function (obj)
     RGraph.clear(obj.canvas, 'white');

Posted by Anderson on 6th August 2014
Thank you very much man, that works perfectly.
Posted by Ed on 16th October 2015
Thank you, Richard

Add a reply


« Back to message list
RGraph on social media