Fill canvas before alert
<p>For a canvas game, how can I load a canvas fill and text before the window alert? Even by just a few milliseconds. </p>

<p>There is a collision that occurs between two players.
Immediately after, the canvas should fill as colour and text should be displayed.</p>

<p>The problem is the alert appears before this happens. </p>

<p>The alert, when OK pressed, should reload the page - I have found that setTimeout does not work because of the <code>location.reload</code> inside of it.</p>

<p>Quick (nasty) example of how it works currently: <a href="https://jsfiddle.net/ajrwpmb3/3/" rel="nofollow">JSFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//collision
if (x &lt; object.x - 50 + 60 &amp;&amp;
    x + width &gt; object.x - 50 &amp;&amp; 
    y &lt; object.y - 60 + 60 &amp;&amp; 
    height + y &gt; object.y - 60) {

  
//fill before alert
ctx.fillRect(0,0,2000,2000);
ctx.strokeText("You only reached a score of " + score + ", you lose!\nPress 'OK' to try again?", 250, 290);
ctx.fillText("You only reached a score of " + score + ", you lose!\nPress 'OK' to try again?",250,290);

  
//end game alert
if(!alert("You reached a score of ...")){
location.reload();
}}</code></pre>
</div>
</div>
</p>