HTML Canvas Made Simple: A Guide for Beginners.

Table of Contents

1. Introduction


2. Getting Started
   


3. Drawing basics


4. Adding Text


5. Conclusion and Next Steps
   

🟦 Introduction

HTML <canvas> is an HTML element with the tag <canvas> that is used to draw graphics in two or three dimension via Javascript. The <canvas> is a wrapper that can be manipulated by javascript to create texts, images, shapes, animations to create visually appealing and interactive elements.

Looking at the structure of the code. We define canvas wrapper having an id attribute, this is can only be done by id and not class because of uniqueness which is used to reference the canvas with the id name.

To access this we need to retrieve the node created in the Document Object Model(DOM) by using the getElementById("myCanvas") and have access to it using the getContext("2d") method.

This method make us to have access to different drawing methods like

• 
  fillRect(x, y, width, height): This method is to draw a filled rectangle at a position(x, y) with a specified width and height.


• 
  fillStyle = colorName: It is a property to set the color for the object. It could be a colorname, RGB or hex code for the object.

Other methods are:

• 
  strokeRect(x, y, width, height): This method to to make a outline stroke on the rectangle, this may be used independently or combined with fillStyle and fillRect(x, y, width, height).


• 
  clearRect(x, y, width, height): to clear the rectangle by making it transparent.

For creating a line, the following method needs to be set up:

• 
  beginPath(): This method is to start a new path for a drawing.


• 
  moveTo(x, y): This is to move the drawing to the specified points.


• 
  lineTo(x, y): This is to draw from the current position to the specified points.


• 
  stroke(): This is to draw the line.

• Square

These following methods are used in creating a circle:

• 
  beginPath(): this method to begin a path.


• 
  arc(x, y, radius, startAngle, endAngle, anticlockwise): this is for to create circle where x and y is for center coordinate of the center, radius is the radius of the circle, startAngle and endAngle which is an angle for the circle.

4. Polygon

To create a polygon, you need to determine the sides of the shape, it could be a triangle(3 sides), pentagon (5 sides), hexagon(6 sides) or decagon (10 sides).

To create text, the following methods are used:

• 
  font: to specify font size and font family.


• 
  fillStyle: this is to add color to the text.


• 
  fillText: this draws a filled text.


• 
  strokeText: this draws an outline text


• 
  createLinearGradient or createRadialGradient: to add gradients to the text


• 
  textAlign: to set the text horizontally

X