Home Best Practices HTML Canvas cheat sheet

HTML Canvas cheat sheet

Author

Date

Category

While browsing the web for cool projects, we found the “HTML Canvas Tutorial” cheat sheet. While reading it, and thinking of ways to play with that, we reached out to Colin Cieloha, one of the guys responsible for the page, and got a few more words of advise from him. He told us:

The canvas element can be useful to professionals who have enough experience in graphic design to know what they want the HTML element to do, but it can also be a great tool for beginners to work with. People just starting off, or even experimenting, will need to understand that although a canvas element looks a lot like an ‘img’ element, it is extremely different. You no longer have to worry about the ‘src’ attribute, and all you have to do is set the ‘width’ and ‘height’ before you are on your way.

One useful feature in the canvas element that ‘img’ elements do not have is the ability to set fallback content if the content is loaded on an older browser. Fallback content can a saving grace for your content by giving the user a message that explains why the canvas element might not be loading and what they can do to fix it.

Another key difference between the canvas element and the ‘img’ element is the requirement of using a closing tag, or ‘</canvas>’. This is an important difference in the syntax which will determine whether the element works at all.

The last, and by far the most important thing, to consider is the rendering context of your content. This sounds like complex terminology, but all it means is whether you will be using your canvas for 2D or 3D content. By properly setting this using the ‘getContext’ method, you eliminate the chances of your content being displayed completely wrong.

As with anything, success in the beginning is characterized by avoiding the big mistakes. Understanding the three mistakes outlined above and how to avoid them will give beginners a huge advantage and get them to where it is possible to experiment with canvas and understand its capabilities.

Check their cheat sheet and a random cool canvas project from around the web: Solar Crusaders.

Colin Cieloha: HTML Canvas Page

Colin Cieloha is an American author and content marketer at Skilled.co. He writes about everything that will draw his attention with a focus on the mobile and e-commerce space. When he is not writing he is spending his time traveling the globe and snowboarding. You can follow him on his Twitter at @ColinCieloha or on Linkedin.

Until next time!


About Codacy

Codacy is used by thousands of developers to analyze billions of lines of code every day!

Getting started is easy – and free! Just use your  GitHub, Bitbucket or Google account to sign up.

GET STARTED

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Recent posts

February’s Product Update: 1-Click Autofixes for GitHub, New People Experience and more 🚀

Welcome to our monthly product update! We’ve been working hard over the past month and have some exciting updates for you below. 🥳 We want...

Interview with Daniel Pfeiffer, CTO at Firstbird

We had a very nice talk with Daniel Pfeiffer, CTO at Firstbird; it was an informal conversation in which we looked to understand the reasons why...

Add a Custom Host to Kubernetes

I’ve been working with different MicroK8s instances a lot in the last months. Microk8s, from my point of view, it’s the absolutely perfect abstraction for deploying...

Deciphering Javascript Checkers: Know Why and When You Might Use Them

We’re all familiar with rules of grammar, which aid in communication by letting us know when to use a comma, how to spell a...

Interview with Felipe Adorno, CTO at Monkey Exchange

We have talked with Felipe Adorno, CTO at Monkey Exchange, to better understand what made the company opt for an automated code review tool...