I want to be alerted once the canvas is rendered

Question

I draw an image on a canvas with a text, but the canvas takes a long time to render. I want to be alerted once the canvas is rendered. This is my script :

function dz_res_click() {
  var canvas = document.getElementById("dz_residence_canvas");
  var context = canvas.getContext("2d");
  var residence = new Image();
  residence.src = "../../imgs/residence.jpg"
  var r_wlaya = document.getElementById("r_wlaya").value;
  residence.onload = function() {
    context.drawImage(residence, 0, 0, 2135, 2843);
    context.font = "bold 70px sans-serif";
    context.textAlign = "right";
    context.fillText(r_wlaya, 1596, 252);
  }
}

maybe this link might help https://stackoverflow.com/questions/31299509/call-a-function-when-html5-canvas-is-ready — Yash Soni, Nov 30 '18 at 18:41
@YashSoni thanks for replay, and i don't get the answer there — farhat, Nov 30 '18 at 19:12
Duplicate of this question: https://stackoverflow.com/questions/41346772/how-do-i-know-when-html5-canvas-rendering-is-finished — Neil VanLandingham, Nov 30 '18 at 23:03

score 0 · Answer 1 · answered Dec 01 '18 at 12:56

0

Here is the solution. You just add the alert.

residence.onload = function(){
    context.drawImage(residence, 0, 0, 2135, 2843);
    context.font = "bold 70px sans-serif";
    context.textAlign = "right";
    context.fillText(r_wlaya, 1596, 252);
    alert("javascript is synchronous, so unless there is a callback or promise, 
    functions execute in the order in which they are invoked.");
}

answered Dec 01 '18 at 12:56

Neil VanLandingham

1,016
8
15

thanks for the reply , but the alert is showing before drowing image – farhat Dec 01 '18 at 15:53
Even though the drawing is not yet visible, the rendering has completed. You could try wrapping the alert in a `setTimeout` if you don't want it to trigger until the drawing is visible. You could also just use a custom alert that doesn't block the thread. I like this one: https://sweetalert.js.org/guides/ – Neil VanLandingham Dec 02 '18 at 14:59

I want to be alerted once the canvas is rendered

1 Answers1