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!

sorry , your question is not clear, could you please add relevant details? — invernomuto
– invernomuto, Commented May 3, 2015 at 16:52
still confusing. what table are you referring to? A database table, an HTML table, or a wooden table? — Ejaz
– Ejaz, Commented May 3, 2015 at 21:24
oh, just put the html table inside an absolutely positioned div and put the div over the canvas element using CSS. Calculate your images offset after placing the table on desired spot. — Ejaz
– Ejaz, Commented May 3, 2015 at 21:27
yes it's a html table (I just change it), okay i'm going to try it — Ali ATriple
– Ali ATriple, Commented May 3, 2015 at 21:38

user1693593 · Accepted Answer · 2015-05-03 21:28:02Z

2

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

answered May 3, 2015 at 21:28

user1693593

Sign up to request clarification or add additional context in comments.

1 Comment

Ali ATriple Over a year ago

Yeah it works too, that it's what i was trying to do, thanks!

Roko C. Buljan · Accepted Answer · 2015-05-03 22:14:04Z

1

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] );
}

edited May 3, 2015 at 22:14

answered May 3, 2015 at 21:54

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

4 Comments

Ali ATriple Over a year ago

I'm confusing, from where did you get the x,y of ctx.moveTo()? it's the same as you declared before? var x,y; //Remember coordinates?

Roko C. Buljan Over a year ago

@AliATriple exactly. When instantiated, var x and y are null, so preventing from drawing a line at 0,0. On every other iteration of the loop those variables change to the respective values of the image center position.

Ali ATriple Over a year ago

A last question, if a want to close the form, i just have to move the coordinates to the first image, isn't it?

Roko C. Buljan Over a year ago

@AliATriple my code is not perfect cause it starts a bit at random depending on the loaded images order... had no time to improve it also due to a lack of info from your side about how it all actually kooks (HTML, CSS etc). Would me much easier if you explained a bit better what you have currently. Any way, you've found your answer! Happy coding

Collectives™ on Stack Overflow

Draw with canvas Javascript

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related