CODEWITHSUNDEEP
javascript
Chenius
Chenius

Reputation: 131

make a shape in canvas appear after 5s

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>

Upvotes: 2

Views: 42

Answers (2)

Aprillion
Aprillion

Reputation: 22322

You can use global function setTimeout, e.g. 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>

Upvotes: 0

Andrei Todorut
Andrei Todorut

Reputation: 4526

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)

Upvotes: 3

Related Questions