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:
How to Draw a Path using HTML5 canvas?
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
How to Create a Rectangle
There are 4 ways to create a rectangle:
- The first is you add a rectangular path to an open path, to do that you type
ystand for the axis of the coordinate.
heightdefine as they already say your width and height of the rectangle.
- The second method is to create a rectangular outline, for that you type
- The third method is to fill a rectangular space, you type
- The fourth and last method is to clear a rectangular area, you type
How to add Colors to your Lines and Shapes
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].
Where can I get this free HTML5 Canvas Cheat Sheet?
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.