Tag: canvas in html5

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>
<html>
    <head>
    <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.beginPath();
                      ctx.arc(100, 100, 150, 0, Math.PI * 2, true);
                      ctx.closePath();
                      ctx.stroke();
                  }
                  myImage.src = "";
              }
          }
       </script>
  </head>
    <body onload="displayImage()">
       <canvas id="myCanvas" width="200" height="200">
    </canvas>
      </body>
</html>

 

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.