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.