Target title: Introduction to Level 5
In this level, we're going to try something new - we are going to draw things on the browser window.
In this course, you've already built an HTML web page that contains text and images - you should have already built something like this.
<h1 style="background-color: chartreuse;">
This is my first webpage, and its title.
</h1>
<h2>This is my second heading.</h2>
<p>This is my paragraph.</p>
<img style="width: 600px" src="backwater.jpg" alt="A scenic backwater image" />
<h2>A story about the time when I visited a backwaters.</h2>
<p>Last year, I visited a backwater, before everything changed.</p>
<p>Last year, I visited a backwater, before everything changed.</p>So this is a page with some text, and background colors and images.
And we've done that using HTML tags like heading tags, the paragraph tag, and an image tags. We've also used CSS to style some of these elements.
Now, almost all the websites that you'll see on the internet are built in a similar way - by writing HTML documents that contain HTML tags and styling that changes how the document looks.
However, there are situations where HTML & CSS falls short.
For example, what if you wanted to draw something on screen. Something like a smiley.
Switch to tab: https://curran.github.io/HTML5Examples/canvas/smileyFace.html
We could be able to build something like this with just HTML and CSS, but it would be kinda difficult.
Switch to tab: https://curran.github.io/HTML5Examples/canvas/bouncingBall/index.html
What about a bouncing ball? That's a whole lot more complicated. Notice that this is still an HTML file, but this isn't being built with the HTML tags or CSS that we've used so far.
Switch to tab:
How about an actual video game? Again, still an HTML file, but what's happening on-screen isn't anything like a regular website - this is an interactive application - it's a proper videogame.
So in these examples that I just showed you, what's being used is an HTML element called the canvas, which is very similar to a physical canvas.
So in this level, in the next couple of lessons, we're going to learn how to use HTML canvas. See you there!