Draw with canvas Javascript

Question

Maybe you can advice me, I need to draw with canvas using the coordinates of images as vertex, but I have the images into a table(html table) so I don't know how to do that, how to do the draw inside the table or over the table. For example you have an image on coordinates(60,90) another on (79,45) and other on (70,64), i need to make a triangle with that coordinates, but the images are into a table(each image in different cells. This is my draw code:

function draw(elem) { //elem is the image

var image= elem;
var position = image.getBoundingClientRect();
//alert(posicion.top+" "+ posicion.right+" "+posicion.bottom+" "+posicion.left);

var canvas = document.getElementById('myCanvas');
var contexto = canvas.getContext('2d');
       contexto.beginPath();
       contexto.moveTo(position.top,50);
       contexto.lineTo(position.top,150);
       contexto.lineTo(position.top+100,150);
       contexto.fill();
}

and this is my canvas:

<canvas id="myCanvas" width="700" height="700">Your browse don't support canvas</canvas>

I put it under the table code and I call the function in other function. If you could help me it would be great. Thanks!

Answer 1

I hope I understand your question correctly: you have images in an actual Table element ( <table></table> ) and images in some cells. You have a canvas placed below it which you want to draw lines on to connect the images in the table.

To do this just subtract the canvas element's absolute position from the image's absolute position. This will make the image's position relative to the canvas.

For example

var canvas = document.getElementById('myCanvas');
var canvasPos = canvas.getBoundingClientRect();
var position = image.getBoundingClientRect();

var x = position.left - canvasPos.left;
var y = position.top - canvasPos.top;

var contexto = canvas.getContext('2d');
contexto.beginPath();
contexto.moveTo(x, y);
... next image

Answer 2

jsBin demo

Let's say you have a table and canvas inside a parent like:

<div id="wrapper">
  <canvas id="lines"></canvas>
  <table id="table">
      <!-- 7*7 -->
  </table>
</div>

#wrapper{
  position:relative;
  margin:0 auto;
  width: 700px;
  height:700px;
}
#wrapper canvas{
  display:block;
  position:absolute;
}
#wrapper table{
  position: absolute;
}
#wrapper table td{
  background: rgba(0,0,0,0.1);
  width: 100px;
  height: 100px;
  vertical-align: middle;
}
#wrapper table td img{
  display: block;
  opacity:0.4;
}

You need to connect your images using lines,
you're probably interested for the image center but you need also to account the parent offset, so you need to subtract that position from the brc (getBoundingClientRect) of each image and it's td parentNode height/width:

var table = document.getElementById("table");
var images = table.getElementsByTagName("img");
var canvas = document.getElementById("lines");
var ctx = canvas.getContext("2d");
var x, y; // Remember coordinates

canvas.width  = table.offsetWidth;
canvas.height = table.offsetHeight;


function connect( image ) {
  var im = new Image();
  im.onload = function(){ // make sure image is loaded
    var tabBcr = table.getBoundingClientRect();
    var imgBcr = image.getBoundingClientRect();
    ctx.beginPath();
    ctx.moveTo(x, y);
    x = imgBcr.left + (image.parentNode.offsetWidth / 2) - tabBcr.left;
    y = imgBcr.top + (image.parentNode.offsetHeight / 2) - tabBcr.top;
    ctx.lineTo(x, y);
    ctx.stroke();
  };
  im.src = images[i].src;
}


for(var i=0; i<images.length; i++){
  connect( images[i] );
}