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?

draw path html5 canvas 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 stroke() or fill() the path to render it. Then to finish you type closePath().

How to Create a Rectangle

draw rectangle html5 canvas cheat sheet

There are 4 ways to create a rectangle:

  1. The first is you add a rectangular path to an open path, to do that you type rect(x,y,width,height). Where x and y stand for the axis of the coordinate. width and height define as they already say your width and height of the rectangle.
  2. The second method is to create a rectangular outline, for that you type strokeRect(x,y,width,height).
  3. The third method is to fill a rectangular space, you type fillRect(x,y,width,height).
  4. The fourth and last method is to clear a rectangular area, you type clearRect(x,y,width,height)

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!

download html5 canvas cheat sheet

It is great that this guide is available for download in .PNG and .PDF or you can open it directly from your browser.

Another bonus is that this resource page is totally free! By only using their browsers and prior understanding of HTML and JavaScript, coders can produce original images, styled texts, and even animate to an extent. Whether you’re a student working on a school project or a blogger who wants to refresh their site’s layout with cool animations, this guide is perfect for everyone who wants to get more insight on the canvas tool and further their coding education.


Leave a Reply

Your email address will not be published. Required fields are marked *