Artyom Neustroev Artyom Neustroev - 3 months ago 12
Javascript Question

HTML5 canvas .toDataURL() image has no background color

Problem



When using
.toDataURL()
method of HTML5
<canvas>
element the
background-color
property of the element is not applied to the picture.

Question



Is this happenning because
background-color
is not actually a part of
canvas
, but a DOM styling? If so, or anything else, what can be a workaround for this?

Fiddle



Fiddle to play with here. The base64 string is logged to console.

Additional info



The canvas is created from the
svg
using https://code.google.com/p/canvg/

Answer

You're correct that it isn't actually a part of the image data, only a part of the styling. The easiest way around this is to just draw a rectangle before drawing the SVG:

var canvas = document.getElementById('test');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);
Comments