Rotate object or shape in HTML5 Canvas

HTML5 canvas provides rotate(angle) method which is used to rotate the canvas around the current origin clockwise. The parameter ‘angle’ should be radians not in degrees. You can use degree * Math.PI/180 formula to convert the degree in radians, suppose if you want to rotate canvas 45 degree you can use 45*Math.PI/180 for the angle. Continue reading “Rotate object or shape in HTML5 Canvas”

Create a animated Analog clock in HTML5-Animation on canvas

In this article I will see that how can you create a analog clock on canvas element and JavaScript in HTML5. This article also gives you a better understanding of how to draw arcs and lines on canvas in HTML5. Continue reading “Create a animated Analog clock in HTML5-Animation on canvas”

The complete example to remove element from the list by drag and drop in HTML 5

In the following example, you’ll learn that how can you delete the elements with the help of drag and drop effect in HTML5 and JavaScript. Drag and drop is a very common feature in HTML5.

The Demo allows the user to drag an element (‘li’ HTML tag) from the list and drop the element over right side area (‘div’ HTML element) to remove element from list. Continue reading “The complete example to remove element from the list by drag and drop in HTML 5”

How to detect the support of HTML 5 features on user’s browser

Basically Modernizr is an open-source JavaScript library that detects the support of native implementations of HTML5 and CSS3.

First time I saw the use of the Modernizr JavaScript library in my first MVC4 web application in the BundleConfig.cs file. I had started the MVC4 with the internet template. At that time I don’t know the real use of this library, later than I found that it can be very useful to take advantage of the advanced feature of the HTML5 and CSS3. Continue reading “How to detect the support of HTML 5 features on user’s browser”

Create the PDF at client side in HTML5

Now you can generate the PDF document through the client side library jsPDF. You can create the PDF using main built-in function such as insert image, insert text with different fonts to pdf etc. Normally user creates the pdf programmatically on the server side that may lead to decrease the performance of your web page. Continue reading “Create the PDF at client side in HTML5”