Lesson 1: How to set up Canvas Html5, also known as Canvas API
My latest creative journey — exploring a new medium
I don’t know why we have this urge to be creative. This is a theme that I have often pondered in my weekly Creative Lesson series. I never really got to a final conclusion and decided to just accept that we have this creative need.
Humans have to make art because that is just the way we are. We need water, food and sunlight. And stories. And companionship and a sense of belonging and the need to be creative.
There are many ways to be creative. And many mediums to be creative in.
Once we discover a new medium, we never really abandon it. We may no longer paint on cave walls, but we still paint. We may no longer photograph daguerreotypes but we still take photos. People still quilt and sculpt, make wooden carvings and write poetry.
The latest medium that I’ve discovered is generative art. Also known as creative coding. Now with the rise of AI created art the two are often confused but there is actually quite a big difference between the two.
There are many coding libraries to explore and I sometimes feel overwhelmed with the possibilities, but let’s start slowly and step-by-step.
You cannot create of piece of generative art without the first line of code.
The first lesson in how to create art with your laptop
It is very easy to start creating digital art with canvas html. You only need a code editor and your computer to create something cool. I suggest using Visual Studio Code but there are many others options available.
The HTML File
Let’s start right away by creating an html file.
- Go to your code editor of choice and start with the HTML boilerplate.
- Let’s title this file Template and also save it as template.html
- Check that your html file is good to go by adding a header:
<h1>Hello World</>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>4. Open up your template.html file in the browser to check that you see this sentence.
5. Other beginner lessons often start by writing all the CSS and JavaScript code on the HTML page but since this file is going to be our template, let’s wire it up as it should be.
The CSS file:
- Add the link code for a CSS file in the head part of the HTML and also create a style.css file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Template</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>- Check that the two files are talking to each other by adding some code to the CSS file.
- Change the background to grey by adding background color:
body {
background-color: grey;
}
3. Reload the html file in the browser to check that the background is indeed grey.
The Canvas file:
Set up the HTML file
- The canvas element on the html file is basically the only element needed. Most of the code will be written in the canvas.js file.
- Connect the JavaScript file to the HTML file by adding the canvas element and canvas.js as the source file. You can delete the ‘Hello World” sentence now.
The html file looks like this now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="canvas.js"></script>
</body>
</html>3. Add a console.log message to the canvas.js file to check that the two files are properly connected.
console.log('hello from the console');4. Check that you see the message by right-clicking on the html file in the browser, select Inspect and then Console.
Set up the JavaScript file
- We are finally ready to write some JavaScript! Connect to the canvas element on the html file and call the context from the Canvas API.
const canvas = document.querySelector ('canvas')
const context = canvas.getContext('2d');Note the following: ‘context’ will often be shortened to ‘ctx’ and ‘ document.querySelector’ is sometimes replaced by ‘document.getElementById’. Use the code that you want but be aware of theses small differences.
2. There are several options for deciding what the size of the canvas will be, but my default option is using the size of the screen. You have to define the width and the height of the canvas.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;3. Most of the shapes created with the Canvas API requires detailed several detailed parameters. The paths of shapes being drawn instead of the shapes themselves. This allows for a lot of flexibility but means also that you have to write several lines of code.
However, the rectangle shape is a primitive, built-in geometric shape on the Canvas API. It is also the only built-in shape. This makes the rectangle shape a good choice for checking that our Canvas Html 5 environment set-up is working.
It come with the following parameters:
fillRect(x, y, width, height)
x = The x-coordinate of the upper-left corner of the rectangle
y = The y-coordinate of the upper-left corner of the rectangle
Width = The width of the rectangle, in pixels
Height = The height of the rectangle, in pixels
We are just going to add some parameters and see how it looks like:
Our canvas.js file now looks like this:
console.log('hello from the console');
const canvas = document.querySelector ('canvas');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillRect(100, 100, 50, 200);
And on the browser, we get this a black rectangle shape:
If colour is not specified, the default colour will be black.
4. Change the parameters in this line of code, refresh the html page in your browser and see how the shape changes. Here are a few options to try:
context.fillRect(50, 50, 50, 200);
context.fillRect(100, 50, 200, 50);
context.fillRect(10, 100, 250, 200);
You can check out the code at my GitHub repository:
https://github.com/MarinaShemesh/template_html5_canvas
