Using Loops in Canvas

Fatt101 · Mar 9, 2014

Hi,

I am looking to create a series of simple applications to test the speed in which canvas can generate images on a canvas, my first one if with plotting line points. My tutor says I need to put the points into a loop, he said it was easy to do but I have no idea how.

Code:

<!DOCTYPE html>
<html>
<head>
<script type="application/javascript" language="javascript">
window.onload = draw;
   
function draw() {
 var before_loadtime = new Date().getTime();
 var loops=1000;
 for (i=0; i<loops; i++) {
 drawit(); }
         var aftr_loadtime = new Date().getTime();
         pgloadtime = (aftr_loadtime - before_loadtime) / 1000;
         document.getElementById("loadtime").innerHTML = "Page load time is <font color='red'><b>" + pgloadtime/loops + "</b></font> Seconds";
}         
  [SIZE="5"][B]// put into a loop[/B][/SIZE]
  function drawit() {
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d"); 
	ctx.beginPath();
	ctx.moveTo(0,400);
	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);
	ctx.lineTo (30,400);
	ctx.lineTo (30,0);
	ctx.lineTo (40,0);
	ctx.lineTo (40,400);
	ctx.lineTo (50,400);
	ctx.lineTo (50,0);
	ctx.lineTo (60,0);
	ctx.lineTo (60,400);
	ctx.lineTo (70,400);
	ctx.lineTo (70,0);
	ctx.lineTo (80,0);
	ctx.lineTo (80,400);
	ctx.lineTo (90,400);
	ctx.lineTo (90,0);
	ctx.lineTo (100,0);
	ctx.lineTo (100,400);
	ctx.lineTo (110,400);
	ctx.lineTo (110,0);
	ctx.lineTo (120,0);
	ctx.lineTo (120,400);
	ctx.lineTo (130,400);
	ctx.lineTo (130,0);
	ctx.lineTo (140,0);
	ctx.lineTo (140,400);
	ctx.lineTo (150,400);
	ctx.lineTo (150,0);
	ctx.lineTo (160,0);
	ctx.lineTo (160,400);
	ctx.lineTo (170,400);
	ctx.lineTo (170,0);
	ctx.lineTo (180,0);
	ctx.lineTo (180,400);
	ctx.lineTo (190,400);
	ctx.lineTo (190,0);
	ctx.lineTo (200,0);
	ctx.lineTo (200,400);
	ctx.lineTo (210,400);
	ctx.lineTo (210,0);
	ctx.lineTo (220,0);
	ctx.lineTo (220,400);
	ctx.lineTo (230,400);
	ctx.lineTo (230,0);
	ctx.lineTo (240,0);
	ctx.lineTo (240,400);
	ctx.lineTo (250,400);
	ctx.lineTo (250,0);
	ctx.lineTo (260,0);
	ctx.lineTo (260,400);
	ctx.lineTo (270,400);
	ctx.lineTo (270,0);
	ctx.lineTo (280,0);
	ctx.lineTo (280,400);
	ctx.lineTo (290,400);
	ctx.lineTo (290,0);
	ctx.lineTo (300,0);
	ctx.lineTo (300,400);
	ctx.lineTo (310,400);
	ctx.lineTo (310,0);
	ctx.lineTo (320,0);
	ctx.lineTo (320,400);
	ctx.lineTo (330,400);
	ctx.lineTo (330,0);
	ctx.lineTo (340,0);
	ctx.lineTo (340,400);
	ctx.lineTo (350,400);
	ctx.lineTo (350,0);
	ctx.lineTo (360,0);
	ctx.lineTo (360,400);
	ctx.lineTo (370,400);
	ctx.lineTo (370,0);
	ctx.lineTo (380,0);
	ctx.lineTo (380,400);
	ctx.lineTo (390,400);
	ctx.lineTo (390,0);
	ctx.lineTo (400,0);
	ctx.lineTo (400,400);
	ctx.fill();
	ctx.closePath();
}
</script>
</head>
<body>
<canvas id="canvas1" width="400" height="400"></canvas>
<h3 style="font-weight: bold; font-style: italic; font-size: large; color: #3333CC">Page load time in JavaScript</h3>
<div>
<span id="loadtime"></span>
</div>
</body>  
</html>

Thanks for any help in advance 🙂
Alex.

Ken g6 · Mar 9, 2014

Yeah, that's not the easiest thing to put in a loop, but it's far from the hardest either. You see that there's a pattern to the "lineTo"s, right?

First, how many lineTos are there before the pattern repeats? Can you separate the first few of these with blank lines?

Second, can you take the first set of lineTos, add a constant to some of their values, and make that set work like the second set of lineTos? (Leave the constant separate - don't simplify the math to get rid of it.)

Now, can you create a loop setting that constant to different values to do most or all of the lineTos?

Fatt101 · Mar 10, 2014

Hi, thanks for the response.

Well i guess the pattern is the following

Code:

ctx.moveTo(0,400);
	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);

I'm not really sure on how to answer the second question, it strikes a few ideas into my mind but nothing concrete.. tbh Ibthink my mind is just going round in circles i'm not really sure, is there any other tips you can offer?

Ken g6 · Mar 10, 2014

Fatt101 said:
tbh Ibthink my mind is just going round in circles

Hey, you wanted to create a loop, right? 😛 Oh, you mean you're in an infinite loop and you need a break? 😉

Well, you've seen that the pattern is four lines. That's one iteration of the pattern. First, copy and paste, say, a dozen lineTo lines. Enough to have several iterations of the pattern. Separate each iteration by a blank line.

Now, create a variable, say "var incr". Edit: I'm not going to tell you what value to assign to incr, but it should be a constant. Make a copy of the first iteration. Then add incr to values in that copy in such a way that the copy works like the second iteration.

Fatt101 · Mar 10, 2014

err kinda think i might be doing something very wrong here, i've tried to mess around with it a bit just doing one iteration but it won't form the gap within the lines when doing so, do you mean doing something like this?

Code:

  function drawit() {
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d"); 
	for (var i=0;i<=4;i++)
	{
	var incr = +10;
	var p = 400;
	var a = 0;
	ctx.moveTo(a,p);
	ctx.lineTo (10,p);
	ctx.lineTo (10,a);
	ctx.lineTo (20,a);
	ctx.lineTo (20,p);
	incr
	ctx.lineTo (30,p);
	ctx.lineTo (30,a);
	ctx.lineTo (40,a);
	ctx.lineTo (40,p);
	incr
	ctx.lineTo (50,p);
	ctx.lineTo (50,a);
	ctx.lineTo (60,a);
	ctx.lineTo (60,p);
	
	}
ctx.fill();
}

although i am quite sure just calling the incr between the lines is not doing anything...

Ken g6 · Mar 10, 2014

OK, I see you get the general concept of what the iterations are, so I'll demonstrate the first few steps. Start with a the first two iterations of lineTos. (I know I said 3, but I'm using 2 just for brevity.)

Code:

	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);
	ctx.lineTo (30,400);
	ctx.lineTo (30,0);
	ctx.lineTo (40,0);
	ctx.lineTo (40,400);

Split 'em up with blank lines.

Code:

	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);

	ctx.lineTo (30,400);
	ctx.lineTo (30,0);
	ctx.lineTo (40,0);
	ctx.lineTo (40,400);

Duplicate the first iteration.

Code:

	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);

        // Duplicate iteration.
	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);

	ctx.lineTo (30,400);
	ctx.lineTo (30,0);
	ctx.lineTo (40,0);
	ctx.lineTo (40,400);

Add incr.

Code:

var incr = ???;

	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);

        // Duplicate iteration.
	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);

	ctx.lineTo (30,400);
	ctx.lineTo (30,0);
	ctx.lineTo (40,0);
	ctx.lineTo (40,400);

Now, your goal is to adjust the value of incr, and add it to the copied lineTos in such a way that the copy of the first iteration works like the second iteration.

Code:

var incr = ???; [B]// Adjust this value...[/B]

	ctx.lineTo (10,400);
	ctx.lineTo (10,0);
	ctx.lineTo (20,0);
	ctx.lineTo (20,400);

        // Duplicate iteration.
	ctx.lineTo (10,400); [B]// <-- And insert incr here somehow...[/B]
	ctx.lineTo (10,0); [B]// <-- [I]And[/I] insert incr here somehow...[/B]
	ctx.lineTo (20,0); [B]// <-- [I]And[/I] insert incr here somehow...[/B]
	ctx.lineTo (20,400); [B]// <-- [I]And[/I] insert incr here somehow...[/B]

        //  ^
        // /|\ [b]So that this code...[/b]
        //  |

        //  |
        // \|/ [b]Works like this code.[/B]
        //  V

	ctx.lineTo (30,400);
	ctx.lineTo (30,0);
	ctx.lineTo (40,0);
	ctx.lineTo (40,400);

Then, once you've done that, extrapolate how you can use those lines with incr, in a loop, to make that code work like all (or almost all) of the lineTo lines. :sneaky:

If you don't see it at this point, try doing the same procedure again, but this time making iteration 1 work like iteration 3.

Using Loops in Canvas

Fatt101

Junior Member

Ken g6

Programming Moderator, Elite Member

Fatt101

Junior Member

Ken g6

Programming Moderator, Elite Member

Fatt101

Junior Member

Ken g6

Programming Moderator, Elite Member

TRENDING THREADS