Why Is My Javascript Promise Stuck As "pending"?

I have a complex SVG that is drawn to a canvas, and this task needs to complete before other objects are drawn. Here's a fiddle simulating this: https://jsfiddle.net/1hucuLg9/1/ //

Solution 1:

You should resolve the promise. Promise docs should be useful.

var promise = newPromise(function(resolve, reject){
  drawSwatch(document.getElementById("mySwatch"));
  resolve();
});
promise.then(function(){
  ctx.drawImage(document.getElementById("myImg",0,0,150,150));
});

Solution 2:

If you want to add myImg only once the image inside drawSwatch has loaded - you can do this

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

//hard code variables for examplevar vw=300, vh=200, x=20, y=50, w=250, h=50; rx=10, ry=5, bg="#fae", theta=15, midptX=100, midptY=120, blur=5;

//helper function to draw swatch objectsfunctiondrawSwatch(currentSwatch, resolve){ // extra parametervar data = '<svg xmlns="http://www.w3.org/2000/svg" width="'+vw+'" height="'+vh+'">'+
    '<defs>'+
    '<filter id="f1">'+
    '<feGaussianBlur in="SourceGraphic" stdDeviation="'+blur+'" />'+
    '</filter>'+
    '</defs>'+
    '<rect class="shape" x="0" y="0" width="'+w+'" height="'+h+'" rx="'+rx+'" ry="'+ry+'" transform="translate('+x+','+y+') rotate('+theta+','+midptX+','+midptY+')" fill="'+bg+'" filter="url(#f1)"></rect>'+
    '</svg>';

    //now draw the svg to canvasvar svg_data = encodeURIComponent(data);
    // create a dataURI versionvar url = 'data:image/svg+xml; charset=utf8, ' + svg_data;
    var img = newImage();
    img.onload = function(){
      ctx.drawImage(img, 0, 0, vw, vh);
      resolve(); // call the passed in resolve function
    }
    img.src = url;
}

//draw svgvar promise = newPromise(function(resolve){ 
  drawSwatch(document.getElementById("mySwatch"), resolve); // call drawSwatch passing in the resolve function
});

promise.then(function(){
  ctx.drawImage(document.getElementById("myImg"),0,0,150,150);
});

added a second parameter to drawSwatch, which is the resolve function from the promise constructor function

Now the callback in promise.then wont be called until img.onload is fired

working fiddle - in the fiddle, instead of calling resolve directly, I've put it in a setTimout, to show that .then isn't executed until the promise is actually resolved