Wait until the full canvas is loaded before finding the base64 of that canvas, rather than relying on a fixed time interval.
function make_base(bg_img, width, height)
{
return new Promise(function(resolve, reject) {
base_image = new Image();
base_image.src = bg_img;
base_image.onload = function(){
ctx.drawImage(base_image, 0, 0, width, height);
resolve()
}
})
}
function loadCanvas(width, height) {
canvas = document.getElementById('canvas');
canvas.id = "canvas";
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
canvas.style.zIndex = 8;
setTimeout(function() {
base64 = canvas.toDataURL("image/jpeg",1);
console.log(base64);
}, 3500);
}
function fillText(name, x_name, y_name, name_color, name_font) {
ctx.fillStyle = name_color;
ctx.font = name_font;
ctx.fillText(name, x_name, y_name);
}
Sometimes there is a delay in loading the canvas content. Setting a fixed 3.5 second timer for the base64 URL generation can result in getting a blank base64 if the canvas is not fully loaded in time.
function work() {
loadCanvas(x,y)
make_base(xxxxx).then(function () {
fillText(abcd)
})
}
Is there a way to ensure that the base64 is generated only after the canvas is fully loaded?