How to create Olympic rings in HTML using canvas and JS

Question

As the title says. This is what I'm looking for https://images-na.ssl-images-amazon.com/images/I/71Hk4-gQvVL._SY355_.jpg

I tried to look online but I only found videos/tutorials with CSS involved in it.

Answer 1

context.arc() method :

https://www.sololearn.com/post/179233/?ref=app

with 2*Math.PI as endAngle

if you don't know context, start from beginning:

https://code.sololearn.com/Wv35v0RsB6R4/?ref=app

Answer 2

Please show your code here so that we can help you
https://www.sololearn.com/post/75089/?ref=app

Answer 3

I forgot to mention I know about arc start end end but some rings are causing me problems. E.g. black ring

Answer 4

#include <graphics.h>

int main() {
int gd = DETECT, gm;
initgraph(&gd, &gm, "");

// Set colors for the rings
setcolor(BLUE);
circle(200, 200, 50);

setcolor(YELLOW);
circle(250, 250, 50);

setcolor(BLACK);
circle(300, 200, 50);

setcolor(GREEN);
circle(350, 250, 50);

setcolor(RED);
circle(400, 200, 50);

// Overlapping pattern
setcolor(WHITE);
circle(250, 200, 50);
circle(300, 250, 50);
circle(350, 200, 50);

getch();
closegraph();
return 0;
}