CODEWITHSUNDEEP
javascripthtmlcanvas
engr.waqas
engr.waqas

Reputation: 384

HTML5 canvas javascript problems in delay

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>

Upvotes: 1

Views: 2404

Answers (3)

engr.waqas
engr.waqas

Reputation: 384

<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

Upvotes: 1

Anand Thangappan
Anand Thangappan

Reputation: 3106

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>

Upvotes: 1

Alnitak
Alnitak

Reputation: 339816

You have two fundamental problems:

  1. Using string-based timeout handlers won't work because your x and y (and ctx) parameters aren't in scope

  2. 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.

Upvotes: 4

Related Questions