Drawing arrows above HTML
You can use my solution not complete draw arrow yet, let create a canvas and draw a line from two points, based on calculate of start and end point.
Example running: https://jsfiddle.net/tabvn/uk7hsj3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<table id="my-table">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td id="end">9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td id="start">0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script type="text/javascript">
var table = document.getElementById('my-table')
var startElement = document.getElementById('start')
var endElement = document.getElementById('end')
var startPoint = {x: startElement.offsetLeft + table.offsetLeft, y: startElement.offsetTop + table.offsetTop}
var endPoint = {x: endElement.offsetLeft + table.offsetLeft, y: endElement.offsetTop + table.offsetTop}
var canvas = document.createElement('canvas')
canvas.width = table.clientWidth
canvas.height = table.clientHeight
canvas.style.position = 'absolute'
canvas.style.top = startPoint.y < endPoint.y ? startPoint.y + 'px' : endPoint.y + 'px'
canvas.style.left = startPoint.x < endPoint.x ? startPoint.x + 'px' : endPoint.x + 'px'
var ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.strokeStyle = 'red'
ctx.fillStyle = 'red'
ctx.moveTo(startPoint.x - (startElement.clientWidth / 2), startPoint.y)
ctx.lineTo(endPoint.x - (endElement.clientWidth / 2), endPoint.y)
ctx.stroke()
document.body.insertBefore(canvas, table, 30)
</script>
</body>
</html>With a bit of JavasSript and CSS you can achieve this without canvas or SVG. Here is an example:
function getPosition(el) {
return {
x: el.offsetLeft + el.offsetWidth / 2,
y: el.offsetTop + el.offsetHeight / 2
};
}
function getDistance(a, b) {
const from = getPosition(a);
const to = getPosition(b);
return {
//https://stackoverflow.com/a/17628488/529024
distance: Math.hypot(from.x - to.x, from.y - to.y),
angle: Math.atan2(to.x - from.x, from.y - to.y) * 180 / Math.PI,
position: {
start: from,
end: to
}
}
}
function init(){
// Get values and elements then set style
const values = getDistance(
document.getElementById("start"),
document.getElementById("end")
);
let wrapper = document.getElementById('wrapper');
let arrow = document.getElementById('arrow');
let bottom = wrapper.offsetHeight - values.position.start.y;
arrow.style.height = values.distance + "px";
arrow.style.transform = `rotate(${values.angle}deg)`;
arrow.style.bottom = bottom + "px";
arrow.style.left = values.position.start.x + "px";
}
init();
window.addEventListener('resize', function(){
init();
});#wrapper {
position: relative;
left: 50px;
top: 100px;
}
#arrow {
position: absolute;
width: 2px;
background-color: red;
transform-origin: bottom center;
}
#arrow::before {
position: absolute;
height: 0px;
width: 0px;
border: 6px solid transparent;
border-bottom: 8px solid red;
content: "";
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}<div id='wrapper'>
<div id='arrow'></div>
<table>
<tr>
<td >0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td id="end">9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td id="start">0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>