Question

133

HTML5 canvas .toDataURL() image has no background color

rated 0 times [ 139] [ 6] / answers: 1 / hits: 19882 / 11 Years ago, wed, september 4, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelynncherokeeg

Add To Favorites

Follow

Total Points: 697

Total Questions: 109

Total Answers: 104

Location: France

Member since Thu, Mar 18, 2021

3 Years ago

jaelynncherokeeg questions

1 NextJS load external image Amazon

Thu, May 27, 21, 00:00, 3 Years ago

1 Create an Array of Favorite fruits Object

Fri, Jan 24, 20, 00:00, 4 Years ago

1 React Testing Library - Avoid getBy?

Thu, Nov 14, 19, 00:00, 5 Years ago

1 How do I POST data to a .NET Core Web API using the fetch() javascript method

Thu, Sep 26, 19, 00:00, 5 Years ago

1 Yarn Link All Packages/Workspaces

Wed, Sep 18, 19, 00:00, 5 Years ago

View All

answered 11 Years ago aubreeg · Accepted 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');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';

ctx.fillRect(0, 0, canvas.width, canvas.height);