Home » Tutorials » Game Development » HTML5 Canvas For Absolute Beginners – Part 3

HTML5 Canvas For Absolute Beginners – Part 3

HTML5 Canvas For Absolute Beginners – Part 3

Welcome to the third part of the ‘HTML5 Canvas for Absolute Beginners’. In this tutorial, we will describe the using of image with canvas. If you haven’t already, be sure to read the previous articles of this series first!

Inserting Image

To use image with canvas, you can either insert the image directly into your document page or create an image object in your JavaScript section. If you using image which are on the same page, then you can access the image using either ‘document.getElementsByTagName‘ method or ‘document.getElementById‘ method (if you know the ID attribute of the image).

Another option is to create an image object in JavaScript. What you need to do is open up the HTML document that you have done in previous tutorial, delete all previous codes under the JavaScript section and insert the following new codes under your JavaScript section:

var img = new Image();
img.src = 'Image.png';

First of all, what you need to do is to create a variable called ‘img’ and declare it as an image object. Then point the source of the image object to the external image that you are going to use. Please note that the formats of image that supported in canvas are either JPG, GIF or PNG. Once you have make reference to the image object, you can use one of the canvas functions called ‘drawImage‘ to draw something on the image that you just linked.

drawImage Function

drawImage(image reference, x, y)

There are 3 parameters for ‘drawImage‘ function, which is image reference, X-axis and Y-axis on the target canvas where your image should be placed. In the following example, we will draw a candlestick on the external image. You can either create the external image by yourself or use the following image:

HTML5 Canvas Graph

Ok, let’s start our tutorial by creating an image object that we had mentioned above, place all JavaScript codes inside a ‘draw‘ function and execute it when the HTML document is onLoading.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
        <script type="text/javascript">
		function draw() {
    		var ctx = document.getElementById('myCanvas').getContext('2d');
    		var img = new Image();
			img.src = 'mygraph.png';
			}
		</script>
	</head>

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

After that, insert an event handler called ‘onload‘ into the ‘draw‘ function to execute the drawing statement as shown below:

<script type="text/javascript">
	function draw() {
		var ctx = document.getElementById('myCanvas').getContext('2d');
		var img = new Image();
		
		//image object is onload
		img.onload = function(){
			ctx.drawImage(img,0,0);
		};
	
		img.src = 'mygraph.png';
	}
</script>

Save your document and preview it, you should see a graph (mygraph.png) has been loaded into your canvas. Next, start draw a rectangle on the graph by using the ‘beginPath‘, ‘moveTo‘, ‘lineTo‘, ‘closePath‘ and ‘stroke‘ functions that we had been introduced in previous tutorial. Following is the code of drawing a rectangle:

<script type="text/javascript">
	function draw() {
		
		var ctx = document.getElementById('myCanvas').getContext('2d');
		var img = new Image();
		
		//image object is onload
		img.onload = function(){
			ctx.drawImage(img,0,0);
			ctx.beginPath();
			ctx.moveTo(100,115);
			ctx.lineTo(120,115);
			ctx.lineTo(120,145);
			ctx.lineTo(100,145);
			ctx.closePath(); 
			ctx.stroke();
		};
		img.src = 'mygraph.png';
	}
</script>

Save your document, preview it on your browser and you should see a rectangle has been added into your graph as shown below:
HTML5 Canvas Graph

Ok, we have done the rectangle, but the candlestick is not done yet, we still need a wick either at bottom or upper of the rectangle.

HTML5 Candlestick

So, we are going to begin another new path and use the same functions that you had used to draw the rectangle:

//draw the wick
ctx.beginPath();
ctx.moveTo(110,145);
ctx.lineTo(110,175); 
ctx.stroke();

Save your document, preview it again and you will see a perfect candlestick appear on your canvas! You can duplicate the functions to create as many candlesticks as you want. 🙂

Final Preview

HTML5 Canvas Candlestick

Final Code

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
        <script type="text/javascript">
		function draw() {
			
    		var ctx = document.getElementById('myCanvas').getContext('2d');
    		var img = new Image();
			
			//image object is onload
    		img.onload = function(){
				ctx.drawImage(img,0,0);
				
				//draw the rectangle
				ctx.beginPath();
				ctx.moveTo(100,115);
				ctx.lineTo(120,115);
				ctx.lineTo(120,145);
				ctx.lineTo(100,145);
				ctx.closePath(); 
				ctx.stroke();
				
				//draw the wick
				ctx.beginPath();
				ctx.moveTo(110,145);
				ctx.lineTo(110,175); 
				ctx.stroke();
			};
			img.src = 'mygraph.png';
			}
		</script>
	</head>

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

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

Other HTML5 and CSS3 tutorial


Android, iOS Development Tutorials