Basic Knowledge of HTML and Canvas

From a small business owner, a blogger, a student or individual with a personal project, the need to create websites has never been more prominent. Having a basic understanding of HTML and canvas knowledge can be helpful, and it is simple to master. The thought of learning to code and programming may seem a long and daunting task, but some people may be surprised to know that it need not be as scary as it sounds.

HTML stands for Hypertext Markup Language and is a format for creating web pages. The format was invented in the early 1990s and has developed since then into the coding that is seen today. The big difference being that no longer does it have to be professional developers creating web pages as anyone can learn how to use it. Primarily HTML consists of tags which provide meaning and context and displays information to the text that they surround.

Almost every single web page on the internet uses HTML as it is the default language of websites. however, it can also be used for other types of documents such as ebooks. Once the HTML documents have been made by the individual or the developer, they are rendered by a web browser which will hide all the tags on the document and displays the content on the page how the tags say it should look.

Even if you do not want to build a website, and just want to run a website, it is beneficial to understand basic HTML concepts.

Canvas is the HTML element used for drawing onto a webpage. While you have always been able to embed images into HTML, the canvas element enables you to draw images directly onto HTML. This element is fairly new and has only become standardised in the last decade. This element depends on a functional understanding of JavaScript.

In HTML5 the canvas element is new and offers a very different approach to drawing. It creates bitmap drawings as opposed to vector based drawing that were previously used. The HTML for canvas is straightforward and simple:

<canvas></canvas>

To create the canvas you can also add the height and the width that you want the canvas to be. For example:

height="300" width="300"

Adding an ID is a good idea as well. Some fall back text could also be included just in case the canvas element is not supported.

To use the element, you have to first draw it with JavaScript. Although using this element is simple and can be picked up quickly, even creating a simple shape, such as a square, requires quite bit of code.

Skilled.co has covered the basic functions and attributes used to create Canvas applications in the HTML Canvas cheat sheet, which comes in very handy as a quick reference during coding.