HTML5 CANAVS: Advanced shapes and Features

We have already created some basic shapes like line, rectangle, circle, image etc. Now we will check the variation and some advanced feature of these shapes. These function and modification are required mainly we need to modify the shapes during function and in the advanced function we will combine all these features and create an advanced function.

1.Line

Previously we used stroke() method to create a line but we can add some more features like line width and line cap.

a. Linewidth:

lineWidth is the function help us for mention the line width.

From the previous function.
Just placed the lineWidth value before calling the stroke() function.
Like,
getcontext.lineWidth = "15";

OUTPUT:

See the Pen LineWidth by pixel (@pixel-lab) on CodePen.

b. linecap.

We have 3 types of lineCapvalues : butt, round, square.
These values could be mention like
context.lineCap = 'butt'; // butt line cap (top line)
context.lineCap = 'round'; // round line cap (middle line)
context.lineCap = square; // square line cap (bottom line)

Let’s check with code:

See the Pen linecap by pixel (@pixel-lab) on CodePen.

Explanation:

Here I have created 3 lines for 3 lineCap values. The order is butt, round, square. You can check the output on the above pen. You might have some confusion for butt and the square but look at their width, the butt didn’t take extra width where the square take some extra width.

2.Pattern.

We already check how to call image into the HTML5 CANVAS function, now we will check how to make pattern using that image load functionality.

Check the code

var canvas = document.getElementById('canvas');
vargetcontext = canvas.getContext('2d');

var image = new Image();
image.onload = function(){
var pattern = getcontext.createPattern(image,'repeat');
getcontext.fillStyle = pattern;
getcontext.fillRect(0,0,700,500);

}
image.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_UZDHPD5jmf_4vTk8dqAsGkcwIzQt3tnWOv-iDeql30H8Zyevb87Bs7yCEG8w7JXElblErqxsqylZRaZ0ETyM-xKxARxRpoiuq2seso-7-FtA5cR29uLxZyHFFJCsYKfs8ZRn-FFkeaY/s1600/fabicon-big.jpg';

Output

See the Pen CANVAS pattern by pixel (@pixel-lab) on CodePen.

Explanation:

In the previous posts we discussed about the image load functionality. We must use the image on image load as it may come from another website or same website will take some time to load. So our pattern function has been written on the image.onload function. createPattern() is the function help us to create pattern of the particular image.

3. Image

We have discussed how to load image in a HTML5 CANVAS function. We will discussed some attributes and advanced features of images function.

a. Height, width:

We can mention images height and width in CANVAS images drawImage function like

The previous one:
context.drawImage(image, x, y);
image is an object of the original image and x,y are the co-ordinates.
Now the function became:
context.drawImage(image, x, y, width, height);
Just mention the height and width in the function.

Output:

See the Pen CANVAS image width,height by pixel (@pixel-lab) on CodePen.

b. Image crop:

Draw image function give us the feature of crop image or getting the partial view of the image. Let’s check the code first and I will explain it during this.

Let’s play with the code:

Form the previous example for load image into the CANVAS, we are familiar the image load function, like

var image = new Image();
image.onload = function(){
getcontext.drawImage(image,0,0,80,80);
}

Now we need 8 of variable for crop and image.
4 for the crop image and 4 for the main canvas.
So I declare them into the onload function as

image.onload = function(){
//we need 8 veriables
//these four variables for the corp image.
varcw=''; //crop image width
varch=''; //crop image height
var cx=''; // corp image x-axis
var cy=''; // corp image y-axis
//these four variables for the main canvas.
var mx=''; // main canvas x-axis
var my=''; // main canvas y-axis
var mw=''; // main canvas width
varmh=''; // main canvas height

getcontext.drawImage(image,250,150); // placed the image in centre
}
Pretty easy right. Now check which means what
First for the crop image variables.

By the measurement of the lines the variable become
image.onload = function(){
//we need 8 veriables
//these four variables for the corp image.
varcw=73; //crop image width
varch=71; //crop image height
var cx=65; // corp image x-axis
var cy=60; // corp image y-axis

//these four variables for the main canvas.
var mx=canvas.width/2 - 73/2; // main canvas x-axis
var my=canvas.height/2 - 71/2; // main canvas y-axis
var mw=73; // main canvas width
varmh=71; // main canvas height

}
Now we need to call the drawImage function but in a manner first place the corp image x,y then its width,height. Then main CNAVAS x,y then its visible width,height.
Like
getcontext.drawImage(image,cx,cy,cw,ch,mx,my,mw,mh); // placed the image in center

See the Pen Canvas image crop by pixel (@pixel-lab) on CodePen.

4. Font

We have used text function for inserting text into the CANVAS. Now we will show all its variations.

a. Font style,alignment& color:

Like the previous examples we can change the fillStyle color for changing the Font color.
getcontext.fillStyle = '#000';
or
getcontext.fillStyle = '#ff0000';

And we have a font function for changing the font styles, like:

getcontext.font ="bold 20px arial";
getcontext.font ="italic 20px arial";

We also can align by the textAlign method, like:

getcontext.font ="bold 20px arial";
getcontext.font ="italic 20px arial";

Please play via comment, uncomment.

OUTPUT

See the Pen Text color and style by pixel (@pixel-lab) on CodePen.

b. MasureText

Mesuretext function in CANVAS help us to measure the text width. It also help us in text alignment.

See the Pen MeasureText by pixel (@pixel-lab) on CodePen.

In the example I have taken the print text in a variable and later I measure it and print it underneath the previous text “Hello world”.


Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.