Episode 26: Taking HTML to the next level (About Canvases and shapes)

Potentially perhaps we could do this later on

Recently, I did a kick off for HTML and CSS in an earlier blog post. I suppose this is my promise kept to start exploring a part of the front-end world. I started exploring tutorials over the weekend and will reflect over what I learnt. The tricks are pretty cool and will probably get cooler along the way.

Today, we’ll be looking at a next level version of HTML, HTML 5 where we’re gonna start putting shapes on the screen, and then hopefully animate them. Yes, the “things that looked impossible to do on Youtube” might not be as impossible as we thought. Plus, as an animator, this is also vital for me and for any animator out there.

HTML 5, what is it?

A version of HTML that can do better stuff that’s way more enhanced than what we know of HTML. Simple. We’ll also be using JAVASCRIPT to control some of the elements on the page instead of just using CSS.

Today I’m covering a simple task of “how to put shapes on the screen.” It sounds boring, but it’s quite tricky to do with HTML 5 and JAVASCRIPT. Let’s look at a sample of a HTML 5 file, that should be quite familiar given it’s a HTML file.

• Line 1, we have our html document initialised and ready to go, we also close it on Line 22.
• Line 2, we are setting the HTML language to english. Yeah! In HTML 5, you can set the language of what your HTML file is going to be! We do this to make sure search engines or screen readers to help interpret the page, as we are also interpreting the page.
• Line 4, we list out what is called a character set. UTF-8 means Universal Character Set + Transformation Format to 8 bits). It’s a character encoding language, also called code points in Unicode. I believe we normally use this format for our HTML files. (pretty sure)
• Ignore line 6 to line 14, as that is css that we can seperate into a style css file.
• Line 19 is really important as this what I call setting a “canvas”

Whenever, we set a canvas, this is like setting the background or the foundation of the beautiful thing we are going to create. The canvas doesn’t actually have to cover the entire window. In fact, we could make different canvases that are called different things that can layout on the page.

However, as we are just starting out, let’s just try use this canvas tool to not only cover the background, but depending on the window size, to cover the background no matter what the size.

• Line 20, is where we require our file. I believe we can put this in the head as well. We should actually put this in the head as well. Basically, this requires our javascript file that we are going to use to do cool stuff.

Great, so now we understand everything on the HTML side. Quite basic stuff if you read through my earlier blog post on HTMl and CSS. However, let’s get into the magic.

On the Javascript Side: CANVASES

Let’s start with these first few lines as it’s important on how we’re gonna make a canvas for every window size, no matter how we refresh it.

On line 1. We’re setting a document and getting information from a query. We’re choosing to get data from our query because we only want a part of our HTML data. URLs communicate via queries, and in these queries, there are data. Since we’re linking this javascript file to our HTML file, our code knows what file to extract data from. In the brackets, we then select ‘canvas’ which if you remember, we made a canvas tag in our body. Yes, these two are linking.

Line 2 and Line 3 is where it gets juicy.

Since we have set the ‘extraction of the canvas data to a canvas variable’, we can now use it to call other things. Line 2 & 3 is where we call the width and height on the canvas.

Now, we could set the canvas.width and canvas.height to permanent numbers but our canvas wouldn’t adjust the size every time we refreshed the page and shrink our window. Hence, we are going to call HTML’S…5’S window feature, where we are going to set the value to the innerWidth and innerHeight. This means we are setting the width and height of the canvas depending on the window size. Before we save this, we’ll have to change the background colour so that we can actually see the canvas. By default, our canvas will be white and that’s silly cause for us to try find because we wouldn’t be able to see it.

Hence, if you look back at our CSS code, we’ve set the body colour to what looks like green (It’s the code for some kind of code). Yes, yes, yes, I know professionally we would split this into a CSS style file and make our code separate which you can do at any time. Specifically after we’ve done this.

Now, if I run the code, ignoring the fact that I have done this code already to the tutorial that I finished up to, we can notice that the canvas will adapt to our browser window every time we decide to refresh it.

It’s originally this size when I load it. If I drag my browser out…

We can see that it stays that size. However, now that I refresh it…

It now fits the window browser. How crazy is that!

Drawing Shapes: Rectangles and Squares.

Let’s figure out how to print out rectangles or squares by looking at the code I’ve just written in our Javascript file.

On our first line, we are setting the variable c to equal to the canvas. “Get context” in that line allows us the ability to print out shapes on the screen. I assume there’s also a 3D attribute one could get but that’s for a later exploration.

Once we have that variable, now we can go into fill Style and fill Rect. Fill Rect will automatically give us a black square or rectangle based on our dimensions. If we look at the first fill rect, the four attributes are about movement and size. I believe the first one is where you want to position it on the x-axis. The second one is position on the y axis. These start from 0-a maximum number depending on your screen size. 0 meaning the top whilst the max meaning the bottom. Be careful with the maxi’s as you could beyond the page forever.

The next one is the size by width and height. If we are making a square, then yes, we would want the width and the height to be the same. If not, then it could be different if we wanted a rectangle. Now, the curious thing about this code is two things.

First, you can see that I’ve made 3 square but how the computer know what colour belongs to what square? The fill style on top relates to the first square I make at the bottom. It’s quite interesting because the way our atom or editor reads code is from top to bottom. So, it kind says:

“Hey you want me to fill something with orange! Ah you want me to fill a square with orange! Okay!”

That’s the hierarchy with filling it shapes (as we all don’t want black rectangles all the time. I certainly don’t as a designer. The second thing is that our canvas log. Since it’s printed down in my code, you would think along the lines of “oh this is vital” or “we need to print the canvas after we initialise the shapes!” Haha, it shouldn’t be there but it actually can be for good use.

When we make our canvas, our canvas would be white correct? I think I mentioned this earlier. However, what if we wanted to check if our canvas has been initialised or if it’s there. Although, we can inspect the page and try highlight the canvas out, we also can print out the canvas attribute to show that it works. It should print something along the lines of “canvas”

Drawing Shapes: Multiple Circles:

Let’s figure out how to print out a circle first, or try understand how to.

Unlike rectangles or squares, where it says exactly what it is, we are using something called an arc. An arc is like a shape of a bracket or we normally refer it to a bridge.

Although it looks like a similar format or property to what rectangles or squares had, it’s slightly different to how a circle is constructed. The first two coordinates are actually the position of the centre point. The center point will determine where our circle will be made, and where the line of the circle gets drawn around it

If we imagine what a compass does, we have a point on our compass that defines the centre and the line that draws a circle around it. It works exactly the same way as a compass.

W3schools actually makes a lot of a sense when defining the next steps. The next element defines the start point (the red circle) and defines the end point (the blue circle). So, if we wanted to draw out the outline of the above circle, we would do something along the lines of (0, Math.Pi * 1.5). Hence in my code, if I do just (Math.PI *2), it literally is doing a full circle. It doesn’t need a start point or end point because the positions of those points are the same.

I hope that make sense. Great we have an outline of a circle. Although I could choose to fill this circle, I’m gonna show a variety of shapes. Some are outlines and some are filled. In this case, our circle is going to be outline in pink.

Now, what if we want 10 circles? 50 circles? 100 circles? Yeah sure, let’s just copy our code a 100 times and make our code endless. Not the way to go.

Here, we can use a for loop that will print out the amount of the circles we want that could also spread across the window page if we wanted to.

Look at that, what a magical thing it is. Let’s go line by line.

So, we have our for loop that basically iterates over the amount of circles we do. In the first line, we set our number of circles from 0 to 1000! This means we are printing out a 1000 circles! The last part (i++) will be the factor that increment to the next circle every time the process is run.

So what we implementing a 1000 times here?

Variable x and y are simply printing out a random position in the window width and height. So, our program will choose a random spot on our browser where the circles will go. Then, as we did before, we make our circle. However, let’s take a look at our code…is there something odd or a thing we are not defining?

That’s right, we are using the variable x and y to determined our position on the window browser! This is what will determined the centre points (thus, positions) of our circle every time a circle is being made! How cool is that!

Now, if I run my page (or as you saw earlier)…I’m going put a 100 circles on the page so you can see the change in position.

You can’t really see it, let me change the colour.

Refreshed one.

Refreshed two.

Can you see that the circles are in different positions every time we refresh? That my friends, it what this for loop does. Yes, I know it’s unexciting that we haven’t animated anything but we will when I touch back on the base with it. However, this is one of the steps to do so and part of the process.

I’ll be back with another post to execute the animation for it. Whether it is tomorrow or next day, or next week, it’ll eventually be covered here. The Dream team this week is facing bumpy waters. Stay tuned x

Fun Fact Of The Day:

I always thought Black Friday wasn’t legit because even though products from andOtherStories were massively on sale, it never was a reasonable sale. However, I never expected to be buying short course on UDEMY.

UDEMY is kinda like treehouse or any short course learning site. Their courses from 200 pounds were 10 pounds each. WHAT, and you could learn any coding extensions, programs, software or life? Whilst I’m grateful for BLACK FRIDAY bestowing this geeky opportunity, I’ll take THREE PLEASE.