Home » Tutorials » JavaScript » HTML5 Canvas For Absolute Beginners – Part 1

HTML5 Canvas For Absolute Beginners – Part 1

HTML5 Canvas For Absolute Beginners – Part 1

  • Stumble it!
  • Share

Canvas, a HTML5 element that can be used for rendering graphics, animation, graphs, photo compositions or any other visual objects on the fly by using JavaScript. In this tutorial, we will describe how to implement canvas in your web projects.

Supported Browsers

Before we start our tutorial, let’s check out whether your browser support this latest technology or not. Below is the list of the browsers that officially canvas supported:

  • Internet Explorer (9.0+)
  • Safari (3.0+)
  • Firefox (3.0+)
  • Chrome (3.0+)
  • Opera (10.0+)
  • iOS (1.0+)
  • Android (1.0+)

Getting Start

Let’s start the tutorial by looking at the <canvas> element itself.

<canvas id="myCanvas" width="300" height="300">

The <canvas> element is looks like other HTML elements. There are 2 important attributes that you have to specify, which is width and height of your draw-able area (Note: Please specify the width and height by using canvas itself, instead of CSS to prevent any distorted visual problem). Besides, it is also good idea to include id attribute for your canvas element, which can be accessed by JavaScript later.

So your <canvas> element will be looks like this in your HTML document:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
	</head>

	<body>
		<canvas id="myCanvas" width="300" height="300">
			<!-- Insert fallback content here -->
            Sorry, your browser doesn't support canvas technology.
		</canvas>
	</body>
</html>

It is always a good practice to include fallback content within your <canvas> element, because it is still relatively new and isn’t implemented in some browsers, such as Internet Explorer 7 and 8.

The Coordinate System

The coordinate system is one of the most important knowledge you need to know before draw on canvas. If you have used any other 2D graphics programming language before, then you will familiar with the standard Cartesian coordinate system with the (0,0) at the top left corner, everything count from top left. For example, if you want to move your rectangle to right, you will have to increase your x-axis value; if you want to moving down, you will have to increase your y-axis value.

Cartesian coordinate system

Simple Graphic

The canvas is initially blank and to display something, you will need the help of JavaScript to draw it for you. The canvas element itself has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. In this tutorial, we will focus on the 2D rendering context.

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext('2d');

Ok, let’s draw a rectangle on the empty canvas:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
        <script type="text/javascript">
			function drawShape() {
				var myCanvas = document.getElementById("myCanvas");
				var ctx = myCanvas.getContext("2d");
				ctx.fillRect(20, 20, 100, 100);
			}
		</script>
	</head>

	<body onload="drawShape()">
		<canvas id="myCanvas" width="300" height="300">
			<!-- Insert fallback content here -->
            Sorry, your browser doesn't support canvas technology
		</canvas>
	</body>
</html>

Save your document and preview it on the supported browser and you will see a black rectangle shape:

HTML5 Canvas For Absolute Beginners – Part 1

We call a function ‘drawShape‘ when the document is on load and draw a rectangle on the empty canvas element by using the ‘fillRect‘ function. There are 4 compulsory parameters for the ‘fillRect‘ function which is upper-left corner (x, y) and its width and height.

ctx.fillRect(x, y, width, height);

Simple enough to understand right? Let’s move on to customize the rectangle that we have just created.

More Advanced

Besides, the ‘fillRect‘ function, there are 2 more functions that allow you to customize your rectangle, which is ‘strokeRect‘ and ‘clearRect‘.

The ‘strokeRect‘ function is to draw outlines for the rectangle. Let’s implement this function into our code as shown below.

ctx.strokeRect(10,10,120,120)

Save and preview it, you should get something like this:

HTML5 Canvas For Absolute Beginners – Part 1

Ok, let’s add the ‘clearRect‘ into our code. ‘clearRect‘ is a function that use to clears the specified area and makes it fully transparent. Let’s add this into the code:

ctx.clearRect(45,45,50,50);

Save and preview it again, You will see that the center of the rectangle become transparent. Note: ‘strokeRect‘ and ‘clearRect‘ have the same parameters as ‘fillRect‘, which is upper-left corner (x, y) and its width and height.

HTML5 Canvas For Absolute Beginners – Part 1

Final Code

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
        <script type="text/javascript">
			function drawShape() {
				var myCanvas = document.getElementById("myCanvas");
				var ctx = myCanvas.getContext("2d");
				ctx.fillRect(20, 20, 100, 100);
				ctx.strokeRect(10,10,120,120);
				ctx.clearRect(45,45,50,50);
			}
		</script>
	</head>

	<body onload="drawShape()">
		<canvas id="myCanvas" width="300" height="300">
			<!-- Insert fallback content here -->
            Sorry, your browser doesn't support canvas technology
		</canvas>
	</body>
</html>

In next tutorial, we will describe more other functions that can be used for canvas element. Stay tune!

Other HTML5 and CSS3 tutorial


  • Create jQuery Responsive Content Slider For Mobile In 5 Minutes!
  • Enhancing Google Map Interactivity with jQuery
  • How To Create jQuery Password Strength Indicator in 10 Minutes!

  • http://twitter.com/kndesign Candelaria Vidal V

    thank you very much! I hope the next, so much thanks!

    • http://www.onlywebpro.com onlyWebPro

      Hi Candelaria,

      Thanks for your comment. Thanks you :)

  • Irene Moghis

    You forgot to set the background to black somewhere. It doesn’t work without that. Please fix your tutorial.

    • http://www.onlywebpro.com onlyWebPro

      Hi Irene Moghis,

      Thanks for your comment. Do you mind to disclose more details about the problem that you mentioned?

  • Ritsaephipania

    it’s so simple.. right?? :)

  • Sennamohan

    Thanks for the wonderful introduction! I got benefitted immensely.

    • http://www.onlywebpro.com onlyWebPro

      You are welcome! :) Follow us on either Facebook or Twitter to get latest updates!

  • anand

    please make more tutorials on html5, now i am a fan of onlywebpro.com its pretty good.

    • http://www.onlywebpro.com onlyWebPro

      Thank you, anand! We will continue to publish more HTML5 tutorials in the future!

  • fourminute

    please invest in grammar textbooks and a dictionary

    • http://www.onlywebpro.com onlyWebPro

      Thank you for your comment. I will. :)

  • K-Man-VanDamme

    Excellent tutorial… don’t worry about the grammar. Those of us that aren’t jerks have an extremely easy time reading your tutorial. The only question is, why is it so short?

    • http://www.onlywebpro.com onlyWebPro

      Hi K-Man-VanDamme,

      Thank you for your support. I’m really appreciate!

      The reason i make it short is to simplify, and make everything easy to understand and learn.

      Hope you enjoy our tutorials and articles. Thanks again :)

  • Turtledovey

    Thanks for posting this, it was super helpful! It got right to the point with just enough guidance and background info.

    • http://www.onlywebpro.com onlyWebPro

      You’re most welcome! Do remember to follow us on our Facebook / twitter / google+ page for more upcoming updates!

Android, iOS Development Tutorials