CODEWITHSUNDEEP
javascripthtml
Jus10
Jus10

Reputation: 15659

HTML5 Draw an arc between two divs/points in javascript

I want to draw an arc across my page, right from one corner of one div to the corner of another div, to show that they're connected in some way. There are lots of things going on in the page, but I'm able to get the two points to draw from and to. So once I have those two coords, what would I use to draw the arc in a way that won't interfere with surrounding text/divs/etc. Just an arc overtop of everything.

Upvotes: 0

Views: 308

Answers (1)

kpie
kpie

Reputation: 11080

You could use a canvas with javascript. You can connect the 2 corners of the canvas with an arc by calling. 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(0,0,c.width,c.height,0.31416*Math.PI);
ctx.stroke();

https://www.w3schools.com/tags/canvas_arc.asp

As long as your canvas is positioned correctly. You can figure out where the divs' corners are with offsetLeft, offsetTop and .style.pixelHeight, .style.pixelWidth, then use absolute positioning for your canvas.

Upvotes: 1

Related Questions