Buttons stay visible false despite changing to true
I have two functions who are supposed to make a couple of buttons on the stage invisible, capture a part of the canvas and then make some of those buttons visible again so the user can keep playing the game and save multiple pictures. However I cannot get the buttons to automatically become visible again. This is what I have:
this.Savepicbutton.addEventListener("click", savePartImage2.bind(this));
function savePartImage2()
{
this.Savepicbutton.visible = false;
this.Savepicbutton2.visible = false;
this.Savepicbutton3.visible = false;
this.Linkbutton4.visible = false;
this.Linkbutton3.visible = false;
this.Linkbutton2.visible = false;
setTimeout(savePartImage, 300);
}
function savePartImage()
{
var c=document.getElementById("canvas");
var backCanvas = document.createElement('canvas');
backCanvas.width = 700;
backCanvas.height = 900;
var backCtx = backCanvas.getContext('2d');
backCtx.drawImage(c, -500, 0, 1200, 900);
var d=backCanvas.toDataURL("image/jpeg");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");
this.Savepicbutton.visible = true;
this.Savepicbutton2.visible = true;
this.Savepicbutton3.visible = true;
this.Linkbutton2.visible = true;
}
Without the setTimeout, the canvas is drawn before the buttons are turned invisible. I tried setting the selected buttons to true in the savePartImage2 function after the setTimeout but that caused the buttons to become visible before the canvas was drawn so they were visible in the captured image.
Any clue of what I'm doing wrong?
AdChoices