Drawing a parallelogram HTML5 Canvas

Question

I am new to Javascript and Canvas of HTML5. I have to complete a project where I have to draw a parallelogram with three mouse clicks.

Click 1: Starts the first line of the parallelogram.

Click 2: Ends of the first line.

Click 3: When the user drags the mouse up or down from the second click point, a line should be drawn from the second click point along the mouse move and at the same time a third line should be drawn from the first click point parallel to the second line.Upon the third click on the canvas the parallelogram should be complete i.e, a line should be drawn from the second line to the third line.

I am stuck on Click 3. While I conceptually understand how this needs to be done...for the last one week...I could not do much headway. The following is my code:

var canvas, context;
var dragging = false;
var dragStartLocation;
var dragStopLocation;
var dragThirdLocation;
var beginFourthLine;
var snapshot;
var pointsNum;

//Get mouse click coordinates
function getCanvasCoordinates(event) {
  var x = event.clientX - canvas.getBoundingClientRect().left;
  var y = event.clientY - canvas.getBoundingClientRect().top;
  return {
    x: x,
    y: y
  };
}


//save the canvas original state
function takeSnapShot() {
  snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

//restore the canvas original state
function restoreSnapShot() {
  context.putImageData(snapshot, 0, 0);
}


//draw a point on mouse click
function drawPoint(position) {
  context.beginPath();
  context.lineWidth = 3;
  context.strokeStyle = '#f4d03f';
  context.arc(position.x, position.y, 5.5, 0, Math.PI * 2, false);
  context.stroke();
}

//draw a line on mouse move
function drawLine(position) {
  context.beginPath();
  context.moveTo(dragStartLocation.x, dragStartLocation.y);
  context.lineTo(position.x, position.y);
  context.stroke();
}

//start the event with first mouse click
function dragStart(event) {
  dragging = true;
  dragStartLocation = getCanvasCoordinates(event);
  drawPoint(dragStartLocation);
  console.log(dragStartLocation.x, dragStartLocation.y);
  takeSnapShot();
}

//draw a line along with the mouse move from the first click
function drag(event) {
  var position;
  if (dragging === true) {
    restoreSnapShot();
    position = getCanvasCoordinates(event);
    drawLine(position);
  }
}

//draw the third and fourth coordinates - this is where I am stuck 
function drawThirdCoord(event) {
  dragging = true;
  var beginFourthLine = dragStopLocation.x - dragStartLocation.x;
  restoreSnapShot();
  dragThirdLocation = getCanvasCoordinates(event);
  drawLine(event);
  drawLine(beginFourthLine);
}

//stop the mouse movement and drawing line.
function dragStop(event) {
  dragging = false;
  restoreSnapShot();
  var position = getCanvasCoordinates(event);
  dragStopLocation = position;
  drawLine(position);
  drawPoint(position);
  console.log(dragStopLocation.x, dragStopLocation.y);
  drawThirdCoord(event);
}



function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  context.strokeStyle = 'green';
  context.lineWidth = 6;
  context.lineCap = "round";

  canvas.addEventListener('mousedown', dragStart, false);
  canvas.addEventListener('mousemove', drag, false);
  canvas.addEventListener('mouseup', dragStop, false);

}

window.addEventListener('load', init, false);

rafaelcastrocouto · Accepted Answer

I'm not sure how the mouse drag should work, so I tried to keep the code as close to the question as possible. So you need to drag the first line then just click to end the shape.




  
  parallelogram
  


   
    |

Drawing a parallelogram HTML5 Canvas

Answers (1)

Related Questions