What is Canvas API
From MDN
The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics.
How to start using Canvas API
- Place your script tag in between the HTML
<body>tags to begin using Canvas.
<canvas id="canvas" width="600" height="600"></canvas>
As a convention, the name of the id typically goes by 'canvas'. This of course can be any name of your choosing, just pick a name that optimizes your code flow and makes sense to you.
Once you have the initial skeleton set-up, two attributes are required when setting up your canvas space. A desired 'width' and 'height' of the canvas needs to be set. Also note these attributes can be altered well into the design process if necessary.
let canvas = document.querySelector("#canvas");
const width = canvas.width;
const height = canvas.height;
canvas.width = 400;
canvas.height = 400;
Getting Creative
Thought these examples, I will be coding in the HTML's body tag, nested between script tags. You're free to code along with me in the same environment, or move your code into a separate JavaScript file.
Setting Up the Basics
Once we've laid out the skeleton-frame of our HTML code, it's time to implement code that brings our creative desires to life!
let canvas = document.querySelector("#canvas");
let context = canvas.getContext('2d');
- Place a 'Document' method in the Script portion of the code and pass the id of the canvas space we've created earlier to begin customizing our graphic. We'll target the id by first typing the symbol of the corresponding attribute.
Quick refresher
# = id
. = class.
- The code below tells JavaScript the context of the drawing surface we are creating is 2D as opposed to 3D. And this can be used for creating shapes, text, and images.
let context = canvas.getContext('2d');
First Shape
I'll begin by creating a rectangle that is outlined in a 4 pixel stroke with the 'strokeRect()' method. The color attribute can be altered by calling the variable chained to 'strokeStyle()', then entering a hex color code or by the name of a color identified by JavaScript. In today's example, I'll use 'green'. The parameters passed to the 'strokeRect()' simply refer to its top-left corner at (100, 100), and gives it a size of 400 units wide (first 400) by 400 tall (second 400).
context.lineWidth = 4;
context.strokeStyle = 'green';
context.beginPath();
context.strokeRect(100, 100, 400, 400);
context.stroke();
Outcome
Nested Shapes
context.beginPath();
context.arc(300, 300, 100, 0, Math.PI*2);
context.lineWidth = 3;
context.stroke();
Outcome
Play Around With Your Code
Add in new shapes, rearrange the size of shapes, etc. just get creative and explore all that you can do with a few tweaks, or major ones! In our example, I created two side circles for the larger main circle that all together posses a Venn diagram positioning amongst each other.
context.beginPath();
context.arc(400, 300, 50, 0, Math.PI*2);
context.lineWidth = 2.5;
context.stroke();
context.beginPath();
context.arc(200, 300, 50, 0, Math.PI*2);
context.lineWidth = 2.5;
context.stroke();
Outcome
Top comments (4)
I'm definitely going to have to agree with you. I was genuinely mind-blown and flabbergasted when I first came across this tool! Not having as much time to play around with design in Illustrator these days, this help satiate a strong desire to create art just for the sake of art!
Thank you for reading and commenting, Leonid!
Hey Nate, thanks for reading and commenting on my post!
And I just checked out your app, and niceee! Definitely plants seeds of ideas of more things to try out with Canvas!
Great article! However, if you use Codepen, it will be much better.
Thanks for reading and commenting Naufan, Codepen is new to me, so I will definitely be checking it out in the mean time. I appreciate the suggestion!