Have you ever dreamed of being able to create original and intricate illustrations using nothing
but HTML code? Well now, Web Developers and coding enthusiasts can now unleash their inner
artist with HTML5. Thanks to advances in technology, HTML5 can create basic 2D images but
also more complex animations through scripting and the component called the HTML5 canvas.
Are you not familiar with all the features of HTML5 canvas? No problem! Our friends from skilled.co released a guide to help you master this specific coding tool. It might sound a bit intimidating, but the HTML5 canvas cheat sheet they are offering is easy to read for all types of web designers, regardless if you are a beginner or already an expert.
Here are a few examples of things you’ll learn with this cheat sheet:
Creating a path is one of the easiest things to do on Canvas. To create the path you type
beginPath(). Then to draw into the path you can use different path methods such as
moveTo(), to draw the line in the right direction, or
lineTo() to get the desired length and angle. Furthermore, you can use
fill() the path to render it. Then to finish you type
There are 4 ways to create a rectangle:
ystand for the axis of the coordinate.
heightdefine as they already say your width and height of the rectangle.
To add colors to your line and shapes type
fillStyle=[the color you want], to fill shapes, to color your outlines you type
strokeStyle=[the color you want].
The Canvas cheat sheet is an effective, easy and fast learning tool perfect for everybody who want to improve their coding skills. If you want to learn more about the cheat sheet, or would like to download it for future reference, visit https://skilled.co/html-canvas/ and see for yourself what this beautiful tool has to offer!
It is great that this guide is available for download in .PNG and .PDF or you can open it directly from your browser.