Skip to content
Advertisement

What’s wrong with the addEventListeners

the vector should be able to be pulled and repositioned. ugh!. I have it up on fiddle at

jsFiddle

var canvas = document.getElementById('cv2'),
  c = canvas.getContext('2d');

var wide = canvas.width;
var high = canvas.height;

var p0 = {
  x: 50,
  y: 250
};

var p1 = {
  x: 250,
  y: 270
};

var p2 = {
  x: 250,
  y: 150
};


draw();

function draw() {
  c.clearRect(0, 0, canvas.width, canvas.height);
  drawPoint(p0);
  drawPoint(p1);
  drawPoint(p2);
  drawLines();

}


function drawPoint(p) {
  c.beginPath();
  c.lineWidth = 2;
  c.arc(p.x, p.y, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fill();

}

function drawLines() {
  c.beginPath();
  c.lineWidth = 2;
  c.moveTo(p1.x, p1.y);
  c.lineTo(p0.x, p0.y);
  c.lineTo(p2.x, p2.y);
  c.stroke();
}

canvas.addEventListener('mousedown', onMouseDown);
var dragPoint;

function findDragPoint(x, y) {
  if (hitTest(p0, x, y)) return p0;
  if (hitTest(p1, x, y)) return p1;
  if (hitTest(p2, x, y)) return p2;
  return null;
}

function onMouseDown(event) {
  dragPoint = findDragPoint(event.clientX, event.clientY);
  if (dragPoint) {
    dragPoint.x = event.clientX;
    dragPoint.y = event.clientY;
    draw();
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseup", onMouseUp);
  }
}

function onMouseMove(event) {
  dragPoint.x = event.clientX;
  dragPoint.y = event.cleintY;
  draw();
}

function onMouseUp() {
  canvas.removeEventListener("mousemove", onMouseMove);
  canvas.removeEventListener("mouseup", onMouseUp);
}



function hitTest(p, x, y) {
  var dx = p.x - x,
    dy = p.y - y;
  return Math.sqrt(dx * dx + dy * dy) <= 10;
}
<canvas id='cv2' width=800 height=500></canvas>

Advertisement

Answer

There is nothing messy with JavaScript, you just need a lot more practice…

Few things on your code, as they point out in the comments you have a typo cleintY, also you have to substract the canvas.offset to get the correct position of the mouse.

Those points should be an array that way you can add more and everything will work.

Here is your code working

var canvas = document.getElementById('cv2');
canvas.addEventListener('mousedown', onMouseDown);
var c = canvas.getContext('2d');

var points = [{x:18, y:12},{x:50, y:50},{x:180, y:90},{x:250, y:50}];
var dragPoint = null;
draw();

function draw() {
  c.clearRect(0, 0, canvas.width, canvas.height);
  points.forEach(p => drawPoint(p));
  drawLines();
}

function drawPoint(p) {
  c.beginPath();
  c.lineWidth = 2;
  c.arc(p.x, p.y, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fill();
}

function drawLines() {
  c.beginPath();
  c.lineWidth = 2;
  points.forEach(p => c.lineTo(p.x, p.y));
  c.stroke();
}

function findDragPoint(x, y) {
  for (i = 0; i < points.length; i++) {
    if (hitTest(points[i], x, y)) return points[i];
  };  
  return null;
}

function onMouseDown(event) {
  dragPoint = findDragPoint(event.clientX- canvas.offsetLeft, event.clientY- canvas.offsetTop);
  if (dragPoint) {
    dragPoint.x = event.clientX- canvas.offsetLeft;
    dragPoint.y = event.clientY- canvas.offsetTop;
    draw();
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseup", onMouseUp);
  }
}

function onMouseMove(event) {
  dragPoint.x = event.clientX- canvas.offsetLeft;
  dragPoint.y = event.clientY- canvas.offsetTop;
  draw();
}

function onMouseUp() {
  canvas.removeEventListener("mousemove", onMouseMove);
  canvas.removeEventListener("mouseup", onMouseUp);
}

function hitTest(p, x, y) {
  var dx = p.x - x, dy = p.y - y;
  return Math.sqrt(dx * dx + dy * dy) <= 10;
}
<canvas id='cv2' width=400 height=120></canvas>
Advertisement