Scaling is the next method for transforming canvas, We have already discuss how to rotate canvas and about to translate method in our previous article Rotate object or shape in HTML5 Canvas. Continue reading “Scaling object or shape and flip text in HTML5 Canvas”
Category: HTML5
HTML 5 is the advanced version of the HTML. HTML5 adds many new syntactic features. These include the new , and elements, Other new elements are , , and etc. HTML 5 supports the various programming APIs that can be used with the help of JavaScript such as .
The canvas element (For 2D drawing), Timed media playback, Offline Web Applications, Drag-and-drop,Document editing, Microdata, Browser history management,Web Storage,
file API,File Writer and Web Audio API etc.
Learn the HTML 5
Canvas
– Start with canvas
Draw Path and Lines
– Draw paths
– Lines
– Arcs
– Stroke and Fill Style
– Bezier Curves
– Quadratic Curve
Draw Shapes
– Rectangle and Circle
– Custom Shapes
Gradients Styles
– Linear gradient
– Radial gradient
Text
– Draw Text
– Style and Setting
– Text animation
HTML 5 supported APIs
– GeoLocation API
Animation
– A Simple Example
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”
How to create hyper link on the canvas in HTML5
Directly you can’t create the link on the canvas but you can write a text and can detect the click on this text and then you can use the window.location property. Continue reading “How to create hyper link on the canvas in HTML5”
Draw the Car and Move forward and backward with arrow keys
Draw the Car and Move forward and backward with arrow keys Continue reading “Draw the Car and Move forward and backward with arrow keys”
Why does HTML 5 attract web developers
I have been working with HTML 5 from its starting days and Here I’ll discuss that why does I like it and several features of the HTML 5 that make easier to write the web page. Continue reading “Why does HTML 5 attract web developers”
Starting with geolocation api in HTML 5
Geolocation is the HTML 5 API that is used to get the location of the user. You can get the latitude and longitude of the user’s location. Continue reading “Starting with geolocation api in HTML 5”
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”