HTML5 canvas javascript problems in delay

Question

I was trying to make a delay while the graph was being drawn, but I think I am having trouble with setTimeout. Any help or suggestion will be highly appreciated.

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
function vertix(y,ctx){

  ctx.moveTo(0, y);
  ctx.lineTo(500, y);
}
function horizons(x,ctx){
    ctx.moveTo(x, 0);
    ctx.lineTo(x, 375);
}
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var context=ctx;
var i;
ctx.fillStyle='#FF0000';
canvas.setAttribute('align', 'center');
canvas.setAttribute('width', '800px');
canvas.setAttribute('height', '800px'); // clears the canvas

for (var x = 0.5; x < 500; x += 10) {
    setTimeout("horizons(x,ctx)",1000,'JavaScript');
}
for (var y = 0.5; y < 375; y += 10) {
    setTimeout("vertix(y,ctx)",1000,'JavaScript');
}
ctx.strokeStyle = "#eee";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 40);
ctx.lineTo(240, 40);
ctx.moveTo(260, 40);
ctx.lineTo(500, 40);
ctx.moveTo(495, 35);
ctx.lineTo(500, 40);
ctx.lineTo(495, 45);
ctx.moveTo(60, 0);
ctx.lineTo(60, 153);
ctx.moveTo(60, 173);
ctx.lineTo(60, 375);
ctx.moveTo(65, 370);
ctx.lineTo(60, 375);
ctx.lineTo(55, 370);
ctx.strokeStyle = "#000";
ctx.stroke();
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

context.font = " 'TangerineRegular'";
context.fillText("Graph", 500, 400);
</script>

Use global context variable directly from function not pass it to parameter, also try to setTimeout like this: setTimeout("horizons("+x+")", 1000, 'JavaScript') — Asad Rasheed
– Asad Rasheed, Commented Jun 21, 2011 at 11:14

Alnitak · Accepted Answer · 2011-06-21 11:12:09Z

4

You have two fundamental problems:

Using string-based timeout handlers won't work because your x and y (and ctx) parameters aren't in scope
setTimeout doesn't delay the execution of everything after it, it just means "do this at some time in the future, meanwhile keep on going".

I've created a fiddle at http://jsfiddle.net/alnitak/tGv4x/ which shows how this could be fixed. The core of it is:

var hor_x = 0.5;
var vert_y = 0.5;
var delay = 100;

function vertix() {
    ctx.beginPath();
    ctx.moveTo(0, vert_y);
    ctx.lineTo(500, vert_y);
    ctx.stroke();
    if (vert_y < 375) {
        vert_y += 10;
        setTimeout(vertix, delay);
    }
}

function horizons() {
    ctx.beginPath();
    ctx.moveTo(hor_x, 0);
    ctx.lineTo(hor_x, 375);
    ctx.stroke();
    if (hor_x < 500) {
        hor_x += 10;
        setTimeout(horizons, delay);
    } else {
        setTimeout(vertix, delay);
    }
}

horizons();

In essence - call a single function (horizons) which repeatedly triggers itself, using an externally scoped variable to store the current coordinates. Once that one has finished, it hands over control to another function (vertix) which does the same thing for the other axis.

edited Jun 21, 2011 at 11:12

answered Jun 21, 2011 at 10:58

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

engr.waqas Over a year ago

is there any delay function or technique in javascript?

Alnitak Over a year ago

@engr.waqas no - blocking the event queue is bad practise because it makes the browser unresponsive. I just posted a fully working solution for you.

engr.waqas Over a year ago

Thanks alot @Alnitak,i am just embeding it

Anand Thangappan Over a year ago

Grid line are not behind the X,Y line. Graph is not like that !!

Anand Thangappan · Accepted Answer · 2011-06-21 11:23:08Z

Try this its working:

<canvas id="myCanvas"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var context=ctx;
var i;

function vertix(y){
  ctx.moveTo(0, y);
  ctx.lineTo(500, y);
}
function horizons(x){
    ctx.moveTo(x, 0);
    ctx.lineTo(x, 375);
}


ctx.fillStyle='#FF0000';
canvas.setAttribute('align', 'center');
canvas.setAttribute('width', '800px');
canvas.setAttribute('height', '800px'); // clears the canvas

for (var x = 0.5; x < 500; x += 10) {        
 horizons(x)
}
for (var y = 0.5; y < 375; y += 10) {
 vertix(y)
}

ctx.strokeStyle = "#eee";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 40);
ctx.lineTo(240, 40);
ctx.moveTo(260, 40);
ctx.lineTo(500, 40);
ctx.moveTo(495, 35);
ctx.lineTo(500, 40);
ctx.lineTo(495, 45);
ctx.moveTo(60, 0);
ctx.lineTo(60, 153);
ctx.moveTo(60, 173);
ctx.lineTo(60, 375);
ctx.moveTo(65, 370);
ctx.lineTo(60, 375);
ctx.lineTo(55, 370);
ctx.strokeStyle = "#000";
ctx.stroke();
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

context.font = " 'TangerineRegular'";
context.fillText("Graph", 500, 400);

</script>

the point was that he wants the grid to appear gradually. This code will make it all appear at once.

engr.waqas · Accepted Answer · 2011-06-23 07:35:14Z

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var hor_x = 0.5;
var vert_y = 0.5;
var delay = 100;
function vertix() {
    ctx.beginPath();
    ctx.moveTo(0, vert_y);
    ctx.lineTo(500, vert_y);
    ctx.stroke();
    if (vert_y < 375) {
        vert_y += 10;
        setTimeout(vertix, delay);
    }
}

function horizons() {
    ctx.beginPath();
    ctx.moveTo(hor_x, 0);
    ctx.lineTo(hor_x, 375);
    ctx.stroke();
    if (hor_x < 500) {
        hor_x += 10;
        setTimeout(horizons, delay);
    } else {
        setTimeout(vertix, delay);
    }
}
/*
function vertix(y,ctx){

  ctx.moveTo(0, y);
  ctx.lineTo(500, y);
}
function horizons(x,ctx){
    ctx.moveTo(x, 0);
    ctx.lineTo(x, 375);
}*/
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var context=ctx;
var i;
ctx.fillStyle='#FF0000';
canvas.setAttribute('align', 'center');
canvas.setAttribute('width', '800px');
canvas.setAttribute('height', '800px'); // clears the canvas
horizons();
vertix();
/*
for (var x = 0.5; x < 500; x += 10) {
    setTimeout("horizons(x,ctx)",1000,'JavaScript');
}
for (var y = 0.5; y < 375; y += 10) {
    setTimeout("vertix(y,ctx)",1000,'JavaScript');
}*/
ctx.strokeStyle = "#eee";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 40);
ctx.lineTo(240, 40);
ctx.moveTo(260, 40);
ctx.lineTo(500, 40);
ctx.moveTo(495, 35);
ctx.lineTo(500, 40);
ctx.lineTo(495, 45);
ctx.moveTo(60, 0);
ctx.lineTo(60, 153);
ctx.moveTo(60, 173);
ctx.lineTo(60, 375);
ctx.moveTo(65, 370);
ctx.lineTo(60, 375);
ctx.lineTo(55, 370);
ctx.strokeStyle = "#000";
ctx.stroke();
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

context.font = " 'TangerineRegular'";
context.fillText("Graph", 500, 400);
</script>

its done upto the extent i wanted

Collectives™ on Stack Overflow

HTML5 canvas javascript problems in delay

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related