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

Free Codacy Pro account to fight COVID-19

Our hearts go out to everyone who has been directly or indirectly impacted by the global coronavirus (COVID-19) pandemic. We are committed...

Introducing GitHub Apps for improved user access control

We are very excited to announce our recent migration to GitHub Apps to improve the experience of GitHub Cloud users. Now, you...

How Agile & Container Technology led to the rise of enterprise DevSecOps

New development processes and open-source technologies have shifted the technology security landscape for enterprises. Previously a separate security department often dealt with...

Spring tech events with Codacy: Coverage & what's next

Although many Spring tech events are being canceled or turning virtual due to coronavirus we are fortunate to have already participated in...

Top 6 items for your code review checklist

At Codacy we set high standards, and care about the quality of the code we produce. In order to provide optimal experiences...