CODEWITHSUNDEEP
javascriptcsshtmlcanvasbackground
shhasan
shhasan

Reputation: 453

Setting background colour for transparent canvas/png created from Google Charts

I need help on setting the background colour of a canvas object created by using canvg on a Google Charts Calendar.

Here is the JS Fiddle.

The image/png which is downloaded has a transparent background because the canvas had it this way. I would like to change it so that it is no longer transparent but white.I tried using setAttribute like so:

  canvas.setAttribute(
    'style',
    'position: absolute; ' +
    'top: ' + (-chartArea.offsetHeight * 2) + 'px; ' +
    'left: ' + (-chartArea.offsetWidth * 2) + 'px;' +
    'backgroud-color: #fff;');

and also using this way: canvas.style.backgroundColor = 'blue'; but these attempts have failed and I haven't been able to find a good working answer.

All help is greatly appreciated.

Upvotes: 1

Views: 4417

Answers (2)

bgm
bgm

Reputation: 161

Try:

context = canvas.getContext("2d");

// set to draw behind current content
context.globalCompositeOperation = "destination-over";

// set background color
context.fillStyle = '#fff'; // <- background color

// draw background / rect on entire canvas
context.fillRect(0, 0, canvas.width, canvas.height);

Source: http://blogs.adobe.com/digitalmedia/2011/01/setting-the-background-color-when-generating-images-from-canvas-todataurl/

Upvotes: 5

Marina
Marina

Reputation: 101

to be clear -you want the circle blue?

http://jsfiddle.net/6y3ym4ov/2/ > line 4

<circle id="circle" fill="#202020" stroke="#0A0A0A" stroke-width="4"...

replace fill="#202020" with none / a different colour

fill="#000099" / fill="blue" / fill="rgb(0,0,255)"

Upvotes: 0

Related Questions