Create Circles in HTML

Coding Help
1

Why create circles? Give example code red circle, green circle and yellow circle:)

2

First you need to create a canvas in html.

<canvas id="myCanvas" width="300" height="150">
Browser does not support canvas.
</canvas>

Then you need to add javascript to make the circle.

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

Hacky solution, use border-radius: 999999px; in css

3 Likes
4

Or use a <div> with equal width and height and give 50% border-radius.

5

@xyligan Here’s an example I found online - good luck!

in CSS you can create a class called “dot” with a border radius of 50%

.dot {
height: 25px;
width: 25px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
}

6

Ok. Thank you!! I fixed.