Drawing a blank

I tried coming up with an idea for this article but I'm drawing a blank.

That's my idea: draw a blank. Specifically, a blank canvas.

Okay, I know what you're thinking. A blank canvas is nothing. Anyone can create one.

Drawing a blank is actually not that simple.

Why? Because this is about drawing a blank on screen (that's where you're reading this after all). And the screens of the world come in all different shapes and sizes.

So I'm not just drawing one blank. It's potentially millions, billions… an infinite number of blank canvases, each custom-fitted to a specific screen.

This blank has been modified from its original version. It has been formatted to fit this screen.

That's a lot of screens to custom-fit to so we better get started.

Creating the canvas

First, I need a canvas to draw the blank on. Since this is HTML, I'll use the canvas HTML element.

<canvas></canvas>

Ah: A beautiful, empty, blank canvas.

It'll go inside the body element so the whole HTML code now looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        <canvas></canvas>
    </body>
</html>

Sizing the canvas

Now I need to size the canvas.

There's no other content right now (I tried to come up with ideas but kept drawing blanks) so I might as well use all the screen real estate for the blank canvas. Problem is, I don't know the dimensions of the screen. I mean, I know the dimensions of my screen, but this is meant for everyone's screen.

Luckily, CSS let's you define the size of an element as a percentage of viewport-width and viewport-height, where the viewport is the size of the user's window. That means you can say you want your canvas width to be 100vw (vw is short for viewport-width) and the canvas width will always be 100% of the user's window, regardless of whether that window is 1 pixel, 500 pixels, or 10,000 pixels wide.

So to size the canvas element to totally cover the user's window, I just have to add a simple ruleset to my CSS style sheet. I'll set the canvas' position to absolute. This makes it so the canvas element isn't positioned relative to its parent (the body element) but is free to be wherever we place it. This will prevent unnecessary scrolling since I want to cover the whole window and nothing but the window

Finally, I also want to make sure there's no margin—which sets the space between elements—since I want the whole window to be canvas. So I'll add a ruleset to set the margin to 0 on the body element.

My stylesheet now looks like this:


body {
    margin: 0;
}
canvas {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

That's it! A blank canvas that fits perfectly in your browser window, regardless of its size.

Really making it blank

The 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 already white since by default your browser will display a blank canvas as white. But I didn't really color it white.

So, just for fun, I'm going to really color it white.

But how do you draw on the canvas?

The trusty MDN Web docs tells me that there's 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 only care about making the canvas one color so I'll just use the 2D canvas context for now.

I'll need to use JavaScript to access the canvas element rendering context and set the canvas color.

To run a JavaScript script, I'll just make file called "script.js" and embed that into my HTML with 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 like so:

const canvas = document.getElementById("blankCanvas");

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");

Now I can draw anything. So what will I draw? A blank of course! Or "blanc" (like "blanco" in spanish): white.

I just need to set the fillStyle—which sets the "filled" color—as white and then use the fillRect(x,y,width,height) method to create a filled rectangle across the whole screen with that color.

The rectangle will start from the position (0,0) and be the width and height of the canvas. We can grab those values directly from the canvas element so the full screen rectangle will be fillRect(0, 0, canvas.width, canvas.height).

And with that, I have my blank canvas (or a canvas with a rectangle stretched completely across 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);

I did it, I drew a blank!

But just because I want a blank canvas—and I'm not even sure why I'm so irresistibly drawn to its glow—doesn't mean I can't play around with a few other colors while I'm at it.

I can just change the ctx.fillStyle to "blue" to make the canvas blue.

Well that was fun.

If you want to see all the code for the simple blank canvas, you can find it on Github.

If you want to see the live, blank canvas—and even draw on it yourself!—you can find that here.