Issue
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/
Solution
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');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);
Answered By - ZachRabbit
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.