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.