We Keep Coding

How to save a Canvas with canvas to blob without black background?

I am trying to save a chart from charts.js but its save with a black background and don´t know how to change that background to transparent or white.
I am using Canvas to blob and FileSaver
This is my script
$("#download").click(function() {
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "grafica.png");
});
});

If you don't want to mess with the chart's canvas itself, you can use an offscreen canvas and draw the background there.
const canvasWithBackground = document.createElement('canvas');
canvasWithBackground.width = canvas.width;
canvasWithBackground.height = canvas.height;
const ctx = canvasWithBackground.getContext('2d')!;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(canvas, 0, 0);
canvasWithBackground.toBlob(function(blob) {
saveAs(blob, "grafica.png");
});

I'm not familiar with the library but have you tried actually giving it a white background? Something like the following? It might be using black a default when no color is encountered at a particular pixel.
$("#download").click(function() {
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
saveAs(blob, "grafica.png");
});
});

i just draw a white backgroung before draw the chart on the script and solve the black background problem :)
var backgroundColor = 'white';
Chart.plugins.register({
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});

canvas and background as image

I'm trying to have a page where users can customize a canvas and then email the finished project to themselves. I set the background of the canvas using the following javascript:
function setbackground1() {
document.getElementById('myCanvas').setAttribute("class",
"background1");
}
function setbackground2() {
document.getElementById('myCanvas').setAttribute("class",
"background2");
}
and included a form on the page to populate the rest of the canvas. I have tried various ways of including canvas.toDataURL() in order to save the canvas as an image that can later be emailed to them however the background image is not part of the saved image. (similar problem to Canvas to Save Image and Email but my text saves not my images)
I've been trying variations of this but it's not working for me.
function setbackground11() {
var img = new Image();
img.src = 'background1.jpg';
img.onload = function () {
ctx.fillRect( 0, 0, canvas.width, canvas.height )
}
}
I believe that I somehow have to reference myCanvas id as well
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');`

CSS styles aren't part of the canvas image. For a solid color:
ctx.fillStyle = 'green'
ctx.fillRect( 0, 0, canvas.width, canvas.height )
For an image:
var img = new Image();
img.src = 'background1.jpg';
img.onload = function () {
ctx.drawImage( img, 0, 0, canvas.width, canvas.height )
// do the rest of your drawing over the background
}

Canvas image src from hosted file

currently I am calling canvas source images from imgur, but I would like to host them within my app, like "images/soundwave.png"... .. given my current code, I cant figure out how to do that.
If it helps at all I am using Middleman
<script>
var imgBg = new Image(),
imgFg = new Image(),
count = 2;
imgBg.onload = imgFg.onload = init;
imgBg.src = "http://i.imgur.com/hRHH9VO.png";
imgFg.src = "http://i.imgur.com/WoJggN0.png";
function init() {
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
audio = document.querySelector("audio");
canvas.width = 500;
canvas.height = 120;
render();
audio.addEventListener("timeupdate", render);
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgBg, 0, 0, canvas.width, canvas.height);
// calc progress
var progress = audio.currentTime / audio.duration;
// draw clipped version of top image
if (progress > 0) {
ctx.drawImage(imgFg, 0, 0, imgFg.width * progress, imgFg.height, // source
0, 0, canvas.width * progress, canvas.height); // dst
}
}
}
</script>
any help would be greatly appreciated

In your source directory you can create an images folder and put the images in there.
Then, you can either set the image src to your app URL or a relative URI (e.g. /images/hRHH9VO.png).
Then, if you just need to embed an image in the page you can use the image_tag template helper.

cannot clear canvas with existing image

I am trying to blank canvas when there is image already in it.
I want to remove old image and load new image that I am getting from var getfrontimage.
But It failed me.
$('#fittocanvasfront').click(function () {
var canvas = document.getElementById("canvas-front");
var c = canvas.getContext("2d");
var getfrontimage = $('#image-tocanvaschangefront').attr('src');
var img = new resize(getfrontimage);
function resize(src) {
console.log('blank canvas');
canvas.width = canvas.width;
var image = new Image();
image.src = getfrontimage;
image.width = canvas.width;
image.height = canvas.height;
image.onload = function () {
// clearing canvas
c.clearRect(0, 0, canvas.width, canvas.height);
//loading image
c.drawImage(image, 0, 0);
//creating a hole in canvas
var centerX = canvas.width / 2;
var centerY = canvas.offsetTop;
var radius = 30;
c.beginPath();
c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
c.fillStyle = 'black';
c.fill();
}
}
});
Into the script-
I have image in <img> tag-
var getfrontimage = $('#image-tocanvaschangefront').attr('src');
this above image is what i will be using after clearing canvas.
So I tried doing canvas empty as below when image is being loaded-
c.clearRect(0, 0, canvas.width, canvas.height);
But this didn't work, I tried doing canvas empty on click-
$('#fittocanvasfront').click(function () {
var canvas = document.getElementById("canvas-front");
var c = canvas.getContext("2d");
c.clearRect(0, 0, canvas.width, canvas.height);
});
How do I empty this canvas with existing image in it.

What you are saying is not true. You can clear of any image using clearRect. Please see fiddle with your code where image's cleared on click.
$("#canvas-front").click(function(){
c.clearRect(0, 0, canvas.width, canvas.height);
});
Hard to say what you're doing wrong, since you didn't provide the full code, use the code I provided in fiddle and all should be fine.

canvas.todataURL doesn't work on first attempt

I am trying to draw canvas image from image source.
This below code sinppet is working fine but in IOS-- iPad-chrome and mac-safari not working for first time it is working fine from next try. Don't know where I was wrong. Please help me to get rid of this issue.
var canvas = document.getElementById("canvasThumbResult");
var context = canvas.getContext("2d");
var img = document.getElementById("ImagSrc");
context.drawImage(img, x, y, wi, hi, 0, 0, wi, hi);
var dataURL = canvas.toDataURL("image/jpeg");
$("#CanvasImg").attr("src", dataURL);
$("#CanvasImg").show();

You have to wait for the image to load:
var canvas = document.getElementById("canvasThumbResult");
var context = canvas.getContext("2d");
var img = document.getElementById("ImagSrc");
if (img.complete) {
draw();
} else {
img.onload = function() { draw(); };
}
function draw() {
context.drawImage(img, x, y, wi, hi, 0, 0, wi, hi);
var dataURL = canvas.toDataURL("image/jpeg");
$("#CanvasImg").attr("src", dataURL);
$("#CanvasImg").show();
}