CODEWITHSUNDEEP
javascriptjqueryhtml
jncunha
jncunha

Reputation: 137

HTML5 - delay canvas drawing

I have a simple chunk of code to draw a line in a page. My problem is that I don't know much about HTML5 or JS and I need help to set a delay on the drawing of this line. I want to be able to choose if I want to see it drawing instantly when opening the page or define it to have 5 seconds delay before being draw.

Here it is:

<canvas id="myCanvas" width="1250" height="120"></canvas>

<script>

var canvas = $("#myCanvas")[0];
var c = canvas.getContext("2d");
var amount = 0;
var startX = 164;
var startY = 120;
var endX = 1094;
var endY = 120;

setInterval(function() {
    amount += 0.01; // change to alter duration
    if (amount > 1) amount = 1;
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.strokeStyle = "black";
    c.lineWidth=1;
    c.strokeStyle="#707070";
    c.moveTo(startX, startY);
    // lerp : a  + (b - a) * f
    c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
    c.stroke();
}, 0);

</script>

Thank you for the help!

Upvotes: 2

Views: 12899

Answers (5)

Nikola Radosavljević
Nikola Radosavljević

Reputation: 6911

Short answer

Use setTimeout function to delay execution. What setTimeout does is set up a timer which will execute specified function after specified amount of time. E.g.

setTimeout(function() {
    alert("Hello!");
}, 5000);

will show an alert after 5 seconds (note that time is specified in milliseconds).

Long answer

There are two functions that allow you to schedule a function execution.

  • setTimeout(func, delay) which will execute given function after given delay. This one is used for one-off execution of functions.
  • setInterval(func, delay) which will execute given function repeatedly after delay passes. After initial delay, specified function will be executed. Timer will then be reset and function will be executed again once delay passes once more, and so on.

Both functions can be canceled using their counterparts (clearTimeout and clearInterval).

Upvotes: 0

Adriano Carneiro
Adriano Carneiro

Reputation: 58595

You need to use setTimeout:

setTimeout(function() {
    setInterval(function() {
        amount += 0.01; // change to alter duration
        if (amount > 1) amount = 1;
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.lineWidth=1;
        c.strokeStyle="#707070";
        c.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        c.stroke();
    }, 0);
}, 5000);

Upvotes: 2

BBog
BBog

Reputation: 3650

You need to use setTimeout. setTimeout runs a call after a certain delay.

The function used in your script, setInterval, runs the same function over and over again at a certain interval. Strile's answer should help you

Upvotes: 0

user229044
user229044

Reputation: 239250

Wrap your setInterval call in a setTimeout call. setInterval invokes its function argument repeatedly, where the second argument specifies the delay between invocations. setTimeout invokes its function argument once, after the delay has passed.

function redraw() {
  amount += 0.01; // change to alter duration
  if (amount > 1) amount = 1;
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.strokeStyle = "black";
  c.lineWidth=1;
  c.strokeStyle="#707070";
  c.moveTo(startX, startY);
  // lerp : a  + (b - a) * f
  c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
  c.stroke();
}


setTimeout(function () { setInterval(redraw, 0) }, 5000);

Upvotes: 2

Strille
Strille

Reputation: 5781

Wrap it in a setTimeout: 

var canvas = $("#myCanvas")[0];
var c = canvas.getContext("2d");
var amount = 0;
var startX = 164;
var startY = 120;
var endX = 1094;
var endY = 120;

setTimeout(function() {
    var interval = setInterval(function() {
        amount += 0.01; // change to alter duration
        if (amount > 1) {
            amount = 1;
            clearInterval(interval);
        }
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.lineWidth=1;
        c.strokeStyle="#707070";
        c.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        c.stroke();
    }, 0);

}, 3000);

The above waits 3 seconds (3000 milliseconds) before starting the drawing. Also, whenever you start an interval with setInterval you should store the return value so you can stop the interval later. The code above stops the interval when it's done drawing with clearInterval().

Upvotes: 7

Related Questions