Search code examples
htmlcsshtml5-canvas

how to apply border radius to canvas element like div to make it circle?

i want to make canvas element circle like other any div but its not working. here is my code . please have a loot at code. what am doing wrong with border-radius propoerty ?

<canvas id="myCanvas" width="200" height="200" style="background-color:red;border:1px solid;border-radius:50%">

border-radius property is not working like i apply on div. actually, i want to create rectangle , square and circle of canvas. please anyone can help me

`

Solution

  • Your code looks fine. Border radius should do it however if you are using JavaScript this method might help:

    var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();