HTML5 Canvas For Beginners : Part 4

Introduction

Welcome back to my "HTML5 Canvas For Beginners" article series Part-IV. If you are new to HTML5 Canvas then I suggest you read my previous articles:

In today's article we learn all about HTML5 Canvas Images.

HTML5 Canvas Images

In HTML5 Canvas, we can draw an image using the "drawImage()" method in which we need an image object and a destination point. As we know, the drawImage() method needs an image object, so we need to create an image and wait until it loads on the canvas. We can do this using the "onload" property of the image object.

Example:

<body>
<form id="form1" runat="server">
<div>
<canvas id="drawCanvas" width="600" height="500"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
//Declare an image object
var imgObj = new Image();
imgObj.onload = function () {
ctx.drawImage(imgObj, 5, 80);
};
//Image source
imgObj.src = 'images/disney1.jpg';
</script>
</div>
</form>
</body>

Output

Image Size

In HTML5 Canvas, we can set the size of an image by adding two more parameters in the "drawImage()" method, "width" and "height".

Example:

<body>
<form id="form1" runat="server">
<div>
<canvas id="drawCanvas" width="600" height="500"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
var x = 100;
var y = 120;
var w = 400;
var h = 300;
var imgObj1 = new Image();
imgObj1.onload = function ()
{
ctx.drawImage(imgObj1, x, y, w, h);
}
imgObj1.src = 'images/Captain.jpg';
var imgObj2 = new Image();
imgObj2.onload = function () {
ctx.drawImage(imgObj2, 0, 0, 600, 100);
}
imgObj2.src = 'images/image.jpg';
</script>
</div>
</form>
</body>

Output

Image - Crop

In HTML5 Canvas, we can crop an image by adding six more parameters to the drawImage() method which are as follows :

sourceX
sourceY
sourceWidth
sourceHeight
destWidth
destHeight

The parameters define the size and the location of the area that we need to cut out from an image.

Example:

<body>
<form id="form1" runat="server">
<div>
<canvas id="drawCanvas" width="600" height="500"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
var imgObj = new Image();
imgObj.onload = function ()
{
var srcX = 150;
var srcY = 0;
var srcW = 300;
var srcH = 300;
var destW = srcW;
var destH = srcH;
var destX = drawCanvas.width / 2 - destW / 2;
var destY = drawCanvas.height / 2 - destH / 2;
ctx.drawImage(imgObj, srcX, srcY, srcW, srcH, destX, destY, destW, destH);
};
imgObj.src = 'images/Captain.jpg';
</script>
</div>
</form>
</body>

Output

Pattern

In HTML5 Canvas, the "createPattern()" method is creates various patterns. It returns a pattern object and sets the "fillStyle" property to the pattern object, and then the "fill()" method is used to fill the shape. This method requires a repeat parameter and also an image; repeat can be "repeat", "repeat-x", "repeat-y" or "no-repeat". By default it is set to "repeat".

Example

<body>
<form id="form1" runat="server">
<div>
<canvas id="drawCanvas" width="600" height="500"></canvas>
<script>
var drawCanvas = document.getElementById('drawCanvas');
var ctx = drawCanvas.getContext('2d');
var imgObj = new Image();
imgObj.onload = function ()
{
var pattern = ctx.createPattern(imgObj, 'repeat');
ctx.rect(0, 0, drawCanvas.width, drawCanvas.height);
ctx.fillStyle = pattern;
ctx.fill();
};
imgObj.src = 'image.jpg';
</script>
</div>
</form>
</body>

Output