How to build a <canvas> like Picasso! … Well, almost…
What if I told you that you could create a work of art and even include animation! If that’s not enough, what if those animations were also interactive! And all you need to know is JavaScript and HTML. Think it’s too good to be true? Well, it’s called the <canvas> element in HTML5 and it’s ready to help you create whatever you can put your mind to.
Released in 2004 by Apple for the implementation of widgets and for use in Safari, the <canvas> element helped kick FlashPlayer to the curb with a window into the power of JavaScript. Its library is predominately used for ‘2d’ graphics, but it has the power to create ‘3d’ designs as well. (If you’re looking to see how deep the rabbit hole goes, it can even be used to generate VR web applications.)
The <canvas> element has many uses: animation, game graphics, data visualization, photo manipulation, and real-time video processing. After reading that, the assumption that this is a complex tool requiring a certain level of genius. But, in reality, it’s really quite simple.
The Basics of <canvas>
Let’s take a look at a few basic examples to demonstrate just how easy it is to get shapes on <canvas>:
The first thing you’re going to want to do is create a basic HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Next, you simply add the <canvas> tag inside the <body> element:
<canvas id = "mycanvas" width = "150" height = "150" ></canvas>
As we move forward, it’s important to visualize how you will be placing your items in the <canvas>. For the ‘2d’ examples you will see, we will be relying on the x and y axis.
That was it. You have created your first <canvas>! Now, let’s start adding some happy little shapes. Let’s continue by creating a new file and calling it “application.js.” Inside that file, let’s add two rectangles:
function draw() {
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
}
}Noteworthy code: canvas.getContext(‘2d’) — this line of code is what unlocks the power of the <canvas> element. This gives the programmer access to a huge library of methods that can do everything from putting simple rectangles on the <canvas>, or programming the physics required to implement effects like gravity for games.
The example of above should render the following:
Just like rectangles, circles are relatively easy to render, too. They do require a fair bit more math, however:
function draw() {
const ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
ctx.fill('evenodd');
}
This particular function utilizes <canvas>’s “fill rule”, the even-odd rule, in particular.
Finally, I will demonstrate a simple animation:
const sun = new Image();
const moon = new Image();
const earth = new Image();// Initializes the image files
function init() {
sun.src = 'canvas_sun.png';
moon.src = 'canvas_moon.png';
earth.src = 'canvas_earth.png';
window.requestAnimationFrame(draw);
}
function draw() {
const ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';// Clears the each frame before rendering the new one
ctx.clearRect(0, 0, 300, 300); // clear canvas
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
ctx.save();
ctx.translate(150, 150);
// Earth
const time = new Date();
ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.translate(105, 0);
ctx.fillRect(0, -12, 40, 24); // Shadow
ctx.drawImage(earth, -12, -12);
// Moon
ctx.save();
ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
ctx.translate(0, 28.5);
ctx.drawImage(moon, -3.5, -3.5);
ctx.restore();
ctx.restore();
ctx.beginPath();
ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
ctx.stroke();
ctx.drawImage(sun, 0, 0, 300, 300);
window.requestAnimationFrame(draw);
}
init();
I hope this brief introduction to the <canvas> element helped demonstrate that it’s not all that difficult to do really cool things. Just like with any language, there are many ways to accomplish the same goal, you just need to go out there and try it out!
“I can’t think of anything more rewarding than being able to express yourself to others through painting. Exercising the imagination, experimenting with talents, being creative; these things, to me, are truly the windows to your soul.”
Happy hacking!
