HTML5 canvas .toDataURL() image has no background color

canvas.todataurl not working
canvas.todataurl is not a function
html5 canvas image transparent background
html5 canvas save image to local file
cannot read property 'todataurl' of undefined
canvas todataurl black image
canvas todataurl svg
convert canvas to image
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/

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);

Setting the background color when generating images from Canvas , Setting the background color when generating images from Canvas. One of the cool features of the HTML5 canvas element is the toDataURL method. there is no background color for the image returned from toDataURL. Draw a rectangle the size of the entire canvas with a fillStyle set to the background color we want to use (can be any valid HTML color format). Generate the data url for the canvas. Clear the entire canvas (including background). Copy the original drawing data back into the canvas.

Other approach could be creating a dummy CANVAS and copying the original CANVAS content onto it.

//create a dummy CANVAS

destinationCanvas = document.createElement("canvas");
destinationCanvas.width = srcCanvas.width;
destinationCanvas.height = srcCanvas.height;

destCtx = destinationCanvas.getContext('2d');

//create a rectangle with the desired color
destCtx.fillStyle = "#FFFFFF";
destCtx.fillRect(0,0,srcCanvas.width,srcCanvas.height);

//draw the original canvas onto the destination canvas
destCtx.drawImage(srcCanvas, 0, 0);

//finally use the destinationCanvas.toDataURL() method to get the desired output;
destinationCanvas.toDataURL();

Image created from canvas have black background (HTML5), Image created from canvas have black background (HTML5) Does your exported image from a canvas element a black background with toDataURL() toDataURL("image/png"); // Or without parameter because the default� Use CSS sprites to update a background-position in JS . Hacks with .toDataURL(). The first works great if you have the image ahead of time, but what if your source needs to be programmatically generated, say, by a <canvas>? The solution to #1 is to use .toDataURL() on the canvas and set the background to the generated URL:

hope this will help,

var canvas = document.getElementById('test');

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

//cache height and width        
var w = canvas.width;
var h = canvas.height;

var data = context.getImageData(0, 0, w, h);

var compositeOperation = context.globalCompositeOperation;

context.globalCompositeOperation = "destination-over";
context.fillStyle = "#fff";
context.fillRect(0,0,w,h);

var imageData = canvas.toDataURL("image/png");

context.clearRect (0,0,w,h);
context.putImageData(data, 0,0);        
context.globalCompositeOperation = compositeOperation;

var a = document.createElement('a');
a.href = imageData;
a.download = 'template.png';
a.click();

HTMLCanvasElement.toDataURL(), However the drawing of the dropped image seems to cancel that and after I am trying to give the canvas a white background on componendDidMount() and I can Any solution to get a colored background to a PNG with transparency, using the /13073647/crop-canvas-export-html5-canvas-with-certain-width-and-height . If the height or width of the canvas is 0 or larger than the maximum canvas size, the string "data:," is returned. If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported. Chrome also supports the image/webp type. Syntax canvas.toDataURL(type, encoderOptions); Parameters

PNG with transparency canvas.toDataURL('image/jpeg') � Issue , html5 canvas image transparent background toDataURL() method like this: The workaround is to manually change all non-opaque canvas pixels to your fillStyle = backgroundColor; //draw background / rect on entire canvas context. Moves the path to the specified point in the canvas, without creating a line: closePath() Creates a path from the current point back to the starting point: lineTo() Adds a new point and creates a line to that point from the last specified point in the canvas: clip() Clips a region of any shape and size from the original canvas: quadraticCurveTo()

Change html canvas black background to white background when , toDataURL() image has no background color - javascript html5 canvas. Canvas Examples. A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. The markup looks like this:

javascript, An Article about how to create transparency in images with the html5 canvas Unfortunately that's not a solution for this problem, the context's globalAlpha Finally you can access the new image data with the toDataURL function and set it to� Also I would have posted a test (fiddle or bin) but canvas has a strict cross domain policy. Update: Found an image on the jsfiddle shell I can use for an example that adheres to the cross-domain policy.

Comments
  • Have you tried drawing a big rectangle of the correct colour on your canvas?
  • @robertc works fine with .drawSvg, but no luck with canvg()
  • Yeah, that works with .drawSvg, but does not with canvg() jsfiddle.net/qDmhV/159. Any ideas why?
  • Try changing ingoreClear to ignoreClear. ;)
  • This should be the correct answer...was struggling for such a beautiful answer...earlier answer makes the entire image white. Great job!!!
  • Yes, copying the source into the new canvas is definately the better solution. Thanks
  • Amazing solution, I was using getImageData but that doesn't work for transparent backgrounds.
  • Please provide some explanatory content along your code.