Category Archives: 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

Start with canvas
Draw Path and Lines
Draw paths
Stroke and Fill Style
Bezier Curves
Quadratic Curve
Draw Shapes
Rectangle and Circle
Custom Shapes
Gradients Styles
Linear gradient
Radial gradient
Draw Text
Style and Setting
Text animation
HTML 5 supported APIs
GeoLocation API
A Simple Example

Show image into a circle shape in HTML5

This article will show that how you can show an image into a circle shape using the below code. The following example is using the canvas element and canvas arc() method to create a circle to show the image.

<!DOCTYPE html>
    <script type="text/javascript">
          var myImage = new Image();
          function displayImage() {
              canvas = document.getElementById("myCanvas");
              if (canvas.getContext) {
                  ctx = canvas.getContext("2d");
                  myImage.onload = function() {
                      ctx.drawImage(myImage, 0, 0);
                      ctx.strokeStyle = "white";
                      ctx.lineWidth = "100";
                      ctx.arc(100, 100, 150, 0, Math.PI * 2, true);
                  myImage.src = "";
    <body onload="displayImage()">
       <canvas id="myCanvas" width="200" height="200">


First we initialte a image object then We use the arc() method to draw the circle shape(same as we have done in the previous article – draw smiley in html5) and in the last set the src attribute to image object to display the image in the circle.