Skip to main content
HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.
Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name and class etc.
<canvas id="mycanvas" width="100" height="100"></canvas>
You can easily find that <canvas> element in the DOM using getElementById() method as follows −
var canvas  = document.getElementById("mycanvas");
Let us see a simple example on using <canvas> element in HTML5 document.
<!DOCTYPE HTML>
<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
      
   </head>
   <body>

      <canvas id="mycanvas" width="100" height="100"></canvas>
      
   </body>
</html>
This will produce following result −

The Rendering Context

The <canvas> is initially blank, and to display something, a script first needs to access the rendering context and draw on it.
The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d.
Following is the code to get required context along with a check if your browser supports <canvas> element −
var canvas  = document.getElementById("mycanvas");

if (canvas.getContext){   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} 

else {   
   // canvas-unsupported code here 
}

Browser Support

The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively.
You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to include this javascript as follows:
<!--[if IE]><script src="excanvas.js"></script><![endif]-->

HTML5 Canvas Examples

This tutorial covers following examples related to HTML5 <canvas> element.
ExamplesDescription
Learn how to draw rectangle using HTML5 <canvas> element
Learn how to make shapes using paths in HTML5 <canvas> element
Learn how to draw lines using HTML5 <canvas> element
Learn how to draw bezier curve using HTML5 <canvas> element
Learn how to draw quadratic curve using HTML5 <canvas> element
Learn how to use images with HTML5 <canvas> element
Learn how to create gradients using HTML5 <canvas> element
Learn how to apply styles and colors using HTML5 <canvas> element
Learn how to draw amazing text using different fonts and their size.
Learn how to draw different patterns and drop shadows.
Learn how to save and restore canvas states while doing complex drawings on a canvas.
This method is used to move the canvas and its origin to a different point in the grid.
This method is used to rotate the canvas around the current origin.
This method is used to increase or decrease the units in a canvas grid.
These methods allow modifications directly to the transformation matrix.
This method is used to mask off certain areas or clear sections from the canvas.
Learn how to create basic animation using HTML5 canvas and Javascript.

Comments

Post a Comment

Popular posts from this blog

The Windows Firewall with Advanced Security is a firewall that runs on the Windows Server 2012 and is turned on by default. The Firewall settings within Windows Server 2012 are managed from within the  Windows Firewall Microsoft Management Console . To set Firewall settings perform the following steps − Step 1  − Click on the Server Manager from the task bar → Click the Tools menu and select Windows Firewall with Advanced Security. Step 2  − To see the current configuration settings by selecting  Windows Firewall Properties  from the MMC. This  allows access to modify the settings  for each of the three firewall profiles, which are –  Domain, Private and Public  and IPsec settings. Step 3  − Applying custom rules, which will include the following two steps − Select either  Inbound Rules  or  Outbound Rules  under  Windows Firewall with Advanced Security  on the left side of the management console...
Post a Comment
Read more
In this chapter, we will see how to enable remote desktop application. It is important because this enables us to work remotely on the server. To do this, we have the following two options. For the first option, we have to follow the steps given below. Step 1  − Go to Start → right click “This PC” → Properties. Step 2  − On Left side click “Remote Setting”. Step 3  − Check radio button “Allow Remote connection to this computer” and Check box “Allow connection only from computers running Remote Desktop with Network Level Authentication (recommended)” → click “Select Users”. Step 4  − Click Add. Step 5  − Type user that you want to allow access. In my case, it is administrator → click OK. For the  second option , we need to follow the steps given below. Step 1  − Click on “Server Manage” → Local Server → click on “Enable” or Disable, if it is Disabled.
Post a Comment
Read more
In this chapter, we will see how to configure WSUS and tune it. The following steps should be followed for configuring it. Step 1  − When you open it for the first time, you should do it by going to “Server Manager” → Tools → Windows Server Update Services, then a Configuration wizard will be opened and then click → Next. Step 2  − Click “Start Connecting” → Wait until the green bar is full and then → Next. Step 3  − Check the box for which the updates want to be taken, I did for English and then → Next. Step 4  − Check the box for all the products which you want to update. It is just for Microsoft products and it is recommended to include all the products related to Microsoft and then → Next. Step 5  − Choose the classification updated to be downloaded, if you have a very good internet speed, then check all the boxes, otherwise just check “Critical Updates”. Step 6  − Now we should schedule the updates which I will recommend to do it a...
Post a Comment
Read more