Table of Contents
Annoying Pop Ups
Open up your favorite code editor (I like to use Visual Studio Code). Make a new file and call it
something.html. Put a basic html structure like in my HTML and CSS Basics tutorial. It should look similar to this:
This time around we are going to add a new tag,
<script>. Place it inside of the body tag. The
<script> tag is sort of similar to the
<style> tag. Inside of the
Just to make sure it’s working let’s create a little pop up.
If you reload the page, an annoying pop up box should come up. Yay it works! But why
alert()? What is it and what does it do?
alert("Hello!") is a function. Functions are blocks of code you can run over and over. They can take some kind of input and give some kind of output but they don’t always. You can tell by how there is a name and two parenthesis right next to it. The name
"Hello!". This is some input given to the
alert function, and with this input the browser makes the alert box with your text inside of it and shows it to you.
A Blank Canvas
Enough of these annoying pop up thingys you say?! Say no more, let’s draw things. For this we will need the
<canvas> tag, which should go before the
<script> tag and inside the
<body> tag. Also, you should give it an id like
To use our beautiful canvas, we have to let the code know where it is. We can do that with the following piece of code:
This is a lot of new information, so let’s go over it.
var stands for the word variable. That line creates a new variable with name
myCanvas. A variable is sort of like a box that you can use to carry around useful pieces of data and use them over and over. You can also change the item inside the box but keep the box name (variable name) for data that changes. After we name it
myCanvas, we have an equal sign and a function. The equal sign means put the piece of data from the right side of the equal sign into the variable box named
myCanvas. The function
document.getElementById() gives us the element that is uniquely named by an id passed to it as input. We use an id because we want to make sure that we are using only one element. In our case we are getting the canvas element so we can draw on it.
Next, we need to set up the
<canvas> element for drawing. To do this we make another variable,
context and set it equal to a function on the
<canvas> element. The
getContext('2d') function initializes the canvas for drawing in 2d. You can also initialize it by giving
getContext() input like
webgl for 3d drawing, or
bitmaprenderer to draw images.
To draw a circle, we’ll need 4 functions:
context.fill(). I know this is a lot of functions at once, but they’re not too hard.
beginPath() creates the path for drawing.
closePath() ends it.
arc() draws an arc at some (x, y) pixel coordinate from a certain start angle to a certain end angle with a certain radius. In our case that would be
Math.PI is a variable provided by the browser that approximates pi) because we want to draw all the way around the circle not just a slice of it.
fill() draws the path on the canvas and fills it with a color.
Let’s try and put this all together to draw a circle:
I used comments in the code above to tell you what each of the inputs to the function does. These inputs are usually called arguments by other programmers.
You may have heard about how movies are just a series of pictures one after the other so fast that your brain thinks you’re watching something moving. It’s true. We will use the same technique here by drawing our circle, erasing it, drawing it again at a different position again and again at high speeds.
To do this, we will create our very first function!
function then the name of said function (draw, in our case). Then some parenthesis and an opening curly bracket and a closing curly bracket. Our code to draw the circle will go inside of the curly brackets that way we can run this function over and over and it will draw our circle over and over.
So you can see we made a function named
draw and then we ran it one time. Because we want to run it over and over, we’ll need to use another function named
requestAnimationFrame(). This function synchronizes our drawing function with the browsers drawing function that draws all webpages.
We can run
requestAnimationFrame() at the end of our draw function and give it the name of our draw function as input. That way the browser will know to call our draw function after we drew our previous circle.
Now we should be drawing millions and billions and bajillions of circles over and over each of them on top of each other resulting in the magnificent effect of a single circle on the screen. Great isn’t it? Okay, let’s get that circle moving. You know that to move the circle, you want it to change the coordinates just a little bit each time the circle is drawn. This is the perfect use for a variable! Let’s make one for the x coordinate and one for the y coordinate and start the position at (0, 0). We have to create the variables outside of the draw function because we don’t want the variables to be created from scratch each draw. We want the coordinates to be updated with a slightly different position each time based on the old one.
An important fact to note is that canvas coordinate systems are strange. (0,0) is the top left corner of the canvas and (positive max width, positive max height) is the bottom right of the canvas.
So in this block of code we make new variables
y and set them both equal to 0. Then we set those variables equal to the previous item in the box (0), with 10 added to it (0 + 10). Now 0 + 10 or 10 is stored inside both
So what we will do now is put the
x = x + 10 parts inside of the draw function and use the variables
y as inputs to the
arc() function so that the position of the circle updates with every draw call.
Now if you run this code, you should see a bunch of overlapping circles quickly going diagonally across your beautiful canvas. :) We are almost there! Just need to clear the canvas before each draw to make it seem like a video. Luckily for us, there is a handy function called
clearRect() that we can use. It draws a white rectangle from a start point with a width and a height given to it.
You should see a circle moving across your screen now. :) Not too bad right? If the canvas is too small for you, add width and height attributes (sizes in pixels) to your canvas element html like so:
You can also use
Join me in learning about how computers work
Just enter your email into the box below. You'll also receive my free 12 page guide, Getting Started with Operating System Development, straight to your inbox just for subscribing.