JavaScript Coding Tutorial — Part 3

Let’s continue right where Part 2 left off and widen our canvas to make some room for other types of polygons on our JavaScript web canvas!

First let’s do a little housekeeping and clear out that old commented out drawLoop() function, because that smoother requestAnimationFrame() seems to be working a bit better, yes?

Ok, then let us prepare for drawing more than just rectangle, a person can only handle so many rectangles, so… instead of our init() function having “drawRect” inside of it, let’s change it to the following.

window.requestAnimationFrame(draw);

We also need to take out window.requestAnimationFrame(drawRect); from the bottom of the drawRect() function itself and instead put it at the bottom of the new draw() function.

Then above the drawRect() function itself, we’ll add a new draw() function, where we can draw more than just rectangles. Psst… triangles!

function draw() {
drawRect();
window.requestAnimationFrame(draw);
}

Now for how to draw the simplest of all the regular polygons… the triangle/trigon. But, first let’s make it a bit easier to work on our triangle and make our canvas a little larger by changing the width to 600 pixels and the height to 300 pixels.

<canvas id="myCanvas" width="600" height="300">

Now, we can use the double forward slash to comment out the drawRect() to temporarily disable the rectangles and instead add a drawTriangle() function call to our draw() function.

function draw() {
//drawRect();
drawTriangle();
window.requestAnimationFrame(draw);
}

Great, now, right below that draw() function, we can add our new triangle functionality. But, unlike a rectangle, there is no built-in JavaScript function for drawing this particular shape, so we have to draw the shape line-by-line. We’ll aim to create an equilateral triangle (also known as a regular polygon or a regular triangle).

function drawTriangle() {
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
ctx.strokeStyle = "#9ecc35";
ctx.lineWidth = 30;
ctx.stroke();
}

Once you have added the above JavaScript code and refreshed your browser, you should see something like the following.

Our first brush stroke for our triangle with a green stroke color style and line width of 30.

As you might have guessed, by glancing at the JavaScript snippet, the code moves us to a coordinate on our white canvas and tells the web browser to create a line to another coordinate. Then we set a stroke style and width, which is akin to choosing a paint color and paint brush size, then in the last bit we simply tell it to apply the stroke.

Now, we can add an additional brush stroke by adding one more lineTo() line of code, right after the first lineTo(). This should build two sides of our equilateral triangle, in a letter V like shape.

function drawTriangle() {
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
ctx.lineTo(300, 200);
ctx.strokeStyle = “#9ecc35”;
ctx.lineWidth = 30;
ctx.stroke();
}

Adding our second brush stroke creates two lines that looks like the letter V tilted to the right.

At this point we could put in another lineTo(), but JavaScript makes it a bit easier than that. All we have to do is basically, tell it that it’s a “path” and that we want to close this “path” and the computer will do the work for us!

function drawTriangle() {
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.strokeStyle = “#9ecc35”;
ctx.lineWidth = 30;
ctx.stroke();
}

By declaring it as a path and telling it to close the path, it finishes the triangle for us.

Now with just 2 more lines of JavaScript we can fill in our triangle with a color of our choosing and then we can sit back and ponder whether each of the 3 internal angles are exactly 60 degrees… Perhaps in the future we will use a little math to be sure it’s exactly mathematically proportional.

function drawTriangle() {
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(100, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.strokeStyle = “#9ecc35”;
ctx.lineWidth = 30;
ctx.stroke();
ctx.fillStyle = “#54b958”;
ctx.fill();
}

The 2 additional lines of JavaScript fills in our equilateral triangle with a color of our choosing.

Remember our random functions? Yeah, we can plop a few of those right in there for to replace some of the numbers and make our simple regular polygon, not quite so simple anymore!

function drawTriangle() {
ctx.beginPath();
ctx.moveTo(250, getRandomNum(50, 250));
ctx.lineTo(150, 150);
ctx.lineTo(350, 150);
ctx.closePath();
ctx.strokeStyle = getRandomRGBA(0, 256);
ctx.lineWidth = 30;
ctx.stroke();
ctx.fillStyle = getRandomRGBA(0, 256);
ctx.fill();
}

By adding 3 of our random functions to replace some of the static number we can bring it to life.

Be sure to experiment and use some more of your random functions to see what you can create.

ctx.beginPath();
ctx.moveTo(250, getRandomNum(50, 250));
ctx.lineTo(getRandomNum(50, 250), getRandomNum(50, 150));
ctx.lineTo(getRandomNum(150, 350), getRandomNum(50, 250));
ctx.closePath();

At this point, you can create some pretty cool looking stuff, like something I might have seen in a kaleidoscope or sun shinning through a soap bubble?

Because we are using these random numbers from the random functions, each time you run your JavaScript web app, it will pretty much be generated differently each time. Some people would refer to this as “generative art”, perhaps depending on your definition of art. Either way, be sure to take some time to swap in-and-out your random functions for various numbers and see what you can create!

And… that’s the end of the JavaScript Coding Tutorial — Part 3