make a shape in canvas appear after 5s

Question

I have 2 circles in the html canvas element, which I drew with Javascript. I want to make the first circle appear after 5 seconds. I was wondering if you need to do this with Javascript and if so, how do you do this?

See the code for reference:

 var c = document.getElementById("canvas1"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(30, 75, 20, 0,Math.PI*2); ctx.stroke(); ctx.closePath; ctx.beginPath(); ctx.arc(100,75,20,0,Math.PI*2); ctx.stroke(); ctx.closePath(); 

 #canvas1{ width: 300px; height: 150px; border: 1px solid black; margin-top: 100px; } 

 <canvas id="canvas1"></canvas> 

Answer 1

use setTimeout method when the shape is created

setTimeout(function() {
   ctx.beginPath();
   ctx.arc(30, 75, 20, 0,Math.PI*2);
   ctx.stroke();
   ctx.closePath;
   ctx.beginPath();
   ctx.arc(100,75,20,0,Math.PI*2);
   ctx.stroke();
   ctx.closePath();
},5000)

Answer 2

You can use global function setTimeout , eg like this:

 var c = document.getElementById("canvas1") var ctx = c.getContext("2d") function circle(a1, a2, a3, a4) { ctx.beginPath() ctx.arc(a1, a2, a3, a4 ,Math.PI*2) ctx.stroke() ctx.closePath() } setTimeout(circle, 5000 /*time in ms*/, 30, 75, 20, 0) circle(100, 75, 20, 0) 

 #canvas1{ width: 300px; height: 150px; border: 1px solid black; margin-top: 100px; } 

 <canvas id="canvas1"></canvas>