Art done on the web using web technologies such as HTML, CSS and JAVASCRIPT have become a new craze, when done right it can look really appealing. You might just say modern artists with web technologies as their paintbrush.
look at this wonderful work done by Pieter Biesemans, using HTML and CSS.
In this article we would look at an introduction to the Canvas API, while you can use it to create beautiful works such as the above Codepen, it is not limited to just art, the canvas API can also be used for animations, game graphics, data visualization, photo manipulation, and real-time video processing.
At the end of this article, you would have a clear understanding of the canvas API, how it works and how to use it. Let's get to it.
What is the Canvas API?
hers's what the MDN web docs say:
"The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas 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 canvas element, draws hardware-accelerated 2D and 3D graphics."
How does it work?
The canvas API uses just a single canvas element and JavaScript to render contents onto the canvas.
Take a look at the CodePen above, you might have noticed a lot of div elements being used, the problem with that is, your browser has to go through the process of rendering each div element and adding it to the Document object model (DOM) tree.
However, the canvas API on the other hand just needs one element to hook on to, and creating more content on that element is done using JavaScript. see the example below;
The example above has 5 squares all painted using JavaScript, don't worry if the code looks a bit confusing, let me further explain;
// here we get the canvas DOM element
const canvas = document.getElementById('canvas');
// now we set our context, in this case 2d for drawing 2d graphics
const ctx = canvas.getContext('2d');
// we create a function that calls the fillStyle method for adding colors and the fillRect method for creating rectangle shapes
const drawSquare = (i)=>{
ctx.fillStyle = `#ED${i}853`;
ctx.fillRect(i, i, 150, 100);
};
//here we create a loop that calls the drawSquare function five times, to draw 5 squares onto the canvas
for(let i = 2; i<10; i+=2 ){
drawSquare(i);
};
In the example above, we painted 5 squares using the fillRect() method, this method takes 4 arguments :
- X position on the canvas
- Y position on the canvas
- Width
- Height
Conclusion
The canvas API provides a great way to render 2D graphics, perform animations and so much more, all while striving for performance.
In the coming part of the series, we're going to dive into creating shapes and understanding paths. Until then enjoy these great works done using the canvas API.
If you liked this article, please subscribe to my newsletter so that you get updates before anyone else and follow me on Twitter @D_kingnelson.