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

New Public Product Roadmap – See What's In Store For Q1

We’re excited to release a public product roadmap for 2020.  Now, those outside Codacy can see what our team is working on...

4 Trends To Boost Software Quality in 2020

Today’s abundance of technology has created an increased demand for higher software quality. With companies aware of this, spending on IT worldwide...

7 Reasons Dev Teams Choose Codacy Over Other Automated Code Review Tools

Today more than 100,000 developers at leading global organizations like PayPal and Adobe across industries use Codacy (read customer case studies). ...

Introducing GitHub Sync For Seamless User Management

Announcing GitHub Sync: Synced Organizations For GitHub We are thrilled to announce "GitHub Sync" -- automatic user and repository...

Ringing In 2020 With Codacy

It’s been an exciting 2019 at Codacy and we expect more excitement in 2020. Over the last 12 months we’ve built out...