Get x/y position of triangle from canvas in javascript

Asked Jun 24 '16 at 08:50

Active Jun 24 '16 at 08:50

Viewed 118 times

I am trying to draw a triangle and store it's x/y coordindates. Following https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.translate(0,100);
    ctx.beginPath();
    ctx.moveTo(75,50);
    // READ X/Y VALUE HERE
    ctx.lineTo(100,75);
    // READ X/Y VALUE HERE
    ctx.lineTo(100,25);
    // READ X/Y VALUE HERE
    ctx.fill();
  }
}

How do I get the x/y values in the places marked, as the translate will mean the values put into moveTo and lineTo will be different.

Thanks

asked Jun 24 '16 at 08:50

holmeswatson

Store them in a data structure. – Spencer Wieczorek Jun 24 '16 at 08:52
If you know, where you draw the triangle exactly, then what's your problem? – Bálint Jun 24 '16 at 08:53
The moveTo/lineTo are relative to the translate performed earlier. I want to be able to get the absolute position of these without having to keep track of all the translates – holmeswatson Jun 24 '16 at 09:57
looks like you're looking for something very similar to [this](http://stackoverflow.com/questions/4577410/find-current-point-on-path-for-html-canvas-context) – Adam Popkiewicz Jun 24 '16 at 10:17

Get x/y position of triangle from canvas in javascript

0 Answers0