HTML5 Canvas For Beginners | Drawing Basic Shapes | 02

Video Tutorial

Basic Shapes

So far in the HTML5 Canvas Series we have covered the working space setup and rendering a very basic rectangular with the canvas API, there still a few shapes we need to cover before jumping into creating crazy effects using the power of the canvas API.

So with the canvas API you can draw any shape you would like to from basic one into custom complicated shapes (for e.x: Heart

), so canvas gives us a very easy to use methods to manipulate our shapes rendering.

So here is the basic method for rendering the well-known shapes

here are a few common notes

ctx ///< is our default rendering context 
beginPath() and ClosePath ///< are used to tell where the shape begins and ends

Rectangular

ctx.beginPath();
ctx.rect(5, 5, 200, 140); ///< X-POS, Y-POS, width, height 
ctx.strokeStyle = 'red'; ///< specify a stroke color for the rectangular, that assumes that you are goin to use the stroke() method for rendering
ctx.stroke();
ctx.closePath(); ///< Optional!

//for a filled rectangular, use 
ctx.fill();
// and 
ctx.fillStyle = 'red';
//For Styling

Circle

ctx.beginPath();

ctx.arc(5, 5, 0, Math.PI * 2, false); /*< X-POS, Y-POS, Starting Point(rads), ending point, clock wise */

ctx.strokeStyle = 'red'; /* < specify a stroke color for the rectangular, that assumes that you are goin to use the stroke() method for rendering  */

ctx.stroke();
ctx.closePath(); ///< Optional!

//for a filled rectangular, use 
ctx.fill();
// and 
ctx.fillStyle = 'red';
//For Styling

Custom Shapes (using connected lines)

ctx.beginPath();

ctx.moveTo(75, 50); ///< move into new pos, X-POS, Y-POS
ctx.lineTo(100, 75); ///< Draw a line to X-POS, Y-POS
ctx.lineTo(100, 25); 

//this will render us a Triangle :)

ctx.strokeStyle = 'red'; ///< specify a stroke color for the rectangular, that assumes that you are goin to use the stroke() method for rendering
ctx.stroke();
ctx.closePath(); ///< Optional!

//for a filled rectangular, use 
ctx.fill();
// and 
ctx.fillStyle = 'red';
//For Styling

Text

ctx.beginPath();

ctx.font = '20px sans-serif'; ///< The Font-Size and Font-Family for text
ctx.strokeStyle = 'red'; ///< specify a stroke color for the rectangular, that assumes that you are

ctx.fillText('Hello World!', 200, 150); ///< Text-to-render, X-POS, Y-POS
//or 
ctx.strokeText(); ///< with the same parameters

ctx.closePath(); ///< Optional!

//for a filled rectangular, use 
ctx.fill();
// and 
ctx.fillStyle = 'red';
//For Styling

So that was all the shapes that you can render using the Canvas API.

for custom shapes, you can use the connected line in order to draw a full shape.

What’s Next 

So this tutorial was just for rendering a basic shape using the HTML5 Canvas API, in the next tutorials we are going to create something really nice with the methods above and a few other techniques.