Drawing a blank
I think a good excercise if you want to practice web development is to imagine something in your head, and then write code that turns it into reality on screen.
The following is me doing just that.
First, give me a second to imagine something to create.
[Closes eyes, presses fingertips to temple]
That's odd. I'm not seeing anything in my head.
I'm drawing a blank.
[Awkward pause]
Well you've already read this far so...the show must go on. I guess I'm going to draw a blank.
How to draw a blank
I know a blank doesn't seem super interesting, but it's actually not that simple.
Why? Because I'm drawing a blank on screen. And not just one screen. I want to be able to host this blank on the web, and let everyone experience its blankness. Therefore, it needs to be custom-fitted to all the screens of the world.
Creating the blank canvas
First I need something to put the blank on.
I want to share this blank on the web, so I'll start with an empty web page.
A web page is made of HTML, so I'll just create an empty HTML file.
There it is. A blank web page.
Except that's not quite an empty web page. A web page needs some basic structure to be functional.
There's a top-level html element tag, and then within that a head and a body (kind of like humans).
So here is the HTML for my blank web page, with some basic structure and metadata, telling machines that this is indeed HTML, and giving the page a title (which, naturally, I'm leaving blank).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>
(Pro tip: If you open up a blank HTML file on most text-editors and hit ! + Enter, the above HTML will get generated automtically).
But I can't leave the web page's body totally empty. I need something in the body of the document where I actually "draw" the blank.
I'll use the canvas HTML element to draw my blank on. The canvas element is often used for rendering stuff on a web page, like colorful 3D graphics or...a blank.
Now my web page's body consists of a beautiful, empty, blank canvas:
<body>
<canvas></canvas>
</body>
Sizing the blank canvas
This is going well, now I just need to make this blank canvas cover the entire browser window.
Only problem is, I don't know the dimensions of the browser window. I mean, I know the dimensions of my browser window, but this is meant for everyone's browser window.
You set properties of HTML elements, such as size and color, with CSS. So to size the canvas element to cover the user's window, I have to add a few rules to a CSS stylesheet in my project.
First, I'll set body's margin—the space between elements—to zero. Then I'll set the canvas' position to absolute. This makes sure the canvas is totally within the body of the document, without any extra margin or scrolling.
To make the canvas cover the whole window, I'll set its width and height to be 100vw and 100vh (vw is short for viewport-width and vh short for viewport-height).
Thus my CSS stylesheet looks like this:
body {
margin: 0;
}
canvas {
position: absolute;
width: 100vw;
height: 100vh;
}
Voilá: A blank canvas that fits perfectly in your browser window, regardless of its size.
Really making it blank
But I'm still not satisfied.
This canvas is blank insofar as "blank" means "empty" but the word "blank" actually comes from the Old French word, "blanc", meaning "white".
Now the canvas is likely to already be white since your browser will display a blank canvas as white by default. But just to be safe, and also to feel a little more accomplished about what I did today, I'm going to really color it white.
But how do you draw on the canvas? If this were a physical canvas, I'd just take a paintbrush or pencil and draw on it. But this canvas is digital, so how do I draw on it without ruining my computer screen?
After consulting the MDN Web documentation, I've found that there are a few ways to draw stuff on a canvas element, including a 2D canvas rendering context and WebGL, or Web Graphics Library, for 3D rendering.
I'll just use the 2D canvas context, which is part of the Canvas API for graphics. The Canvas API requires JavaScript to draw on the canvas element, so I'll need to use JavaScript to draw my blank.
Drawing the blank with JavaScript
To run a JavaScript script, I'll make file in my project called "script.js" and embed that into my HTML using the script element.
<script src="script.js"></script>
Before writing the script, I'll make it a little easier to access the canvas element by giving it an id. The id can be anything so I'll call it blankCanvas.
<canvas id="blankCanvas"></canvas>
Now I can grab the canvas by using the document.getElementById() method.
Once I have the canvas, I can get its 2d rendering context with the getContext("2d") method:
const canvas = document.getElementById("blankCanvas");
const ctx = canvas.getContext("2d");
I can now "draw" my white blank by creating a rectangle that covers the entire canvas and coloring it white.
I just need to set the fillStyle, which defines the "filled" color, as white and then use the fillRect(x,y,width,height) method to make the rectangle cover the entire window.
The rectangle will start from the position (0,0), the top left corner, and will be the same width and height as the canvas. We can grab those values directly from the canvas element, so the full screen rectangle can be created with fillRect(0, 0, canvas.width, canvas.height).
And with that, I have my blank canvas (or a canvas with a rectangle stretched completely over it that is filled with the color white).
Altogether, this is the script to draw the white canvas:
const canvas = document.getElementById("blankCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
And that, folks, is how you draw a (digital) blank.
If you want to see the live, blank canvas—and even draw on it yourself!—you can find that here.
If you want to see the full project code for the blank canvas, you can find it on Github.