Firefox drawing blank Canvas when restoring from saved base64

Question

I am working with a single canvas that allows the user to click on a window pane in a window image. The idea is to show where the user has clicked. The image will then be modified (by drawing a grill on the window) and then saved to in JPEG. I am saving the canvas image prior to the click function because I don't want the selection box to show in the final image. However, Firefox often displays a blank canvas when restoring the canvas where IE and Chrome do not. This works perfectly in Chrome and IE. Any suggestions? Does Firefox have a problem with toDataURL() ? Maybe some async issue going on here? I am also aware that saving a canvas in this fashion is memory intensive and there may be a better way to do this but I'm working with what I have.

Code:

    /**
     * Restores canvas from drawingView.canvasRestorePoint if there are any restores saved
     */
    restoreCanvas:function()
    {
      var inverseScale = (1/drawingView.scaleFactor);
      var canvas = document.getElementById("drawPop.canvasOne");
      var c = canvas.getContext("2d");
      if (drawingView.canvasRestorePoint[0]!=null)
      {
        c.clearRect(0,0,canvas.width,canvas.height);
        var img = new Image();
        img.src = drawingView.canvasRestorePoint.pop();
        c.scale(inverseScale,inverseScale);
        c.drawImage(img, 0, 0);
        c.scale(drawingView.scaleFactor, drawingView.scaleFactor);
     }
    },
    /**
     * Pushes canvas into drawingView.canvasRestorePoint
     */
    saveCanvas:function()
    {
       var canvas = document.getElementById("drawPop.canvasOne");
       var urlData = canvas.toDataURL();
       drawingView.canvasRestorePoint.push(urlData);
    },

EXAMPLE OF USE:

    readGrillInputs:function()
    {
        var glassNum = ir.get("drawPop.grillGlassNum").value;
        var panelNum = ir.get("drawPop.grillPanelNum").value;

        drawingView.restoreCanvas();
        drawEngine.drawGrill(glassNum, panelNum,null);
        drawingView.saveCanvas();
    },
    sortClick:function(event)
    {
      ..... //Sorts where user has clicked and generates panel/glass num
      ..... 
      drawingView.showClick(panelNum, glassNum);
    },
    showClick:function(panelNum, glassNum)
    {
       var glass = item.panels[panelNum].glasses[glassNum];
       var c = drawEngine.context;
       drawingView.restoreCanvas();
       drawingView.saveCanvas();
       c.strokeStyle = "red";
       c.strokeRect(glass.x, glass.y, glass.w, glass.h);
    },

Answer 1

By just looking at the code setting the img.src is an async action to retrieve the image, so when you try to draw it 2 lines later to the canvas, it probably hasn't been loaded yet (having it in cache will make it return fast enough that it might work).

You should instead use an img.onload function to draw the image when it has loaded.

restoreCanvas:function()
{
  var inverseScale = (1/drawingView.scaleFactor);
  var canvas = document.getElementById("drawPop.canvasOne");
  var c = canvas.getContext("2d");
  if (drawingView.canvasRestorePoint[0]!=null)
  {
    c.clearRect(0,0,canvas.width,canvas.height);
    var img = new Image();
    img.onload = function() {
      c.scale(inverseScale,inverseScale);
      c.drawImage(img, 0, 0);
      c.scale(drawingView.scaleFactor, drawingView.scaleFactor);
    };
    img.src = drawingView.canvasRestorePoint.pop();
 }
},