css line between 2 link ids

Question

I'm hoping this will make sense. I want to make a line form between to link ids. This can be done with js if possible or css or a combination of them both. The line will be going in all directions from one point to another on a custom map.

E.g point a connects with point b. If I can control the colour of the line then great. If I can make it dashed.. even better. I have tried using a polyline over the top but it doesn't sit in the same place on all browsers. Hence why i'm hoping that there is a more elegant solution using js?

Any help would be great.

Chris

in SO the only sense make by code(your effort) ;) – Govind Singh Jul 09 '14 at 10:34 — Govind Singh, Jul 09 '14 at 10:34

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Use canvas for this purpose :

http://jsfiddle.net/eAK88/

This will help.

JS

var ptA = [50,10];
var ptB = [200,250];
var color = '#ff0000';

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(ptA[0],ptA[1]);
ctx.lineTo(ptB[0],ptB[1]);

ctx.strokeStyle = color;
ctx.stroke();

HTML

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

For dashed line or dotted line :

Ref : Drawing Dashed lines on HTML5 Canvas?

css line between 2 link ids

1 Answers1