drawing rectangle by clicking two points on canvas

Question

I'm trying to draw a rectangle by clicking two points on a canvas. I need to get the x, y coordinates of the first point, the use strokeRect to draw the rectangle on the second click.

Here's what I have so far.

var rectangle = 0;

function plot_pt(event){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
if(rectangle==1){
  ctx.moveTo(clx, cly);
  clx = event.clientX-c.offsetLeft;
  cly = event.clientY-c.offsetTop;
if(rectangle != 0){
rectangle++;
} else {
ulx = event.clientX-c.offsetLeft;
uly = event.clientY-c.offsetTop;
ctx.beginPath();
ctx.moveTo(ulx, uly);
ctx.strokeRect(50, 50, 120, 140);
ctx.stroke();

Answer 1

Here is what you need. Just need to handle you conditions properly.

var rectangle = 0;

function plot_pt() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  if (rectangle == 0) {
    clx = event.clientX - c.offsetLeft;
    cly = event.clientY - c.offsetTop;
    ctx.moveTo(clx, cly);
    rectangle++;
  } else {
    ulx = event.clientX - c.offsetLeft;
    uly = event.clientY - c.offsetTop;
    ctx.beginPath();
    ctx.moveTo(ulx, uly);
    ctx.strokeRect(clx, cly, ulx - clx, uly - cly);
    ctx.stroke();
    rectangle = 0;
  }
}

canvas{
border:2px solid black;
}

<canvas id="myCanvas" height="400" width="400" onclick="plot_pt()"></canvas>

If you need to have the height fixed just change ctx.strokeRect(clx, cly, ulx - clx, uly - cly); to ctx.strokeRect(clx, cly, ulx - clx, 100); or the height you want and similarly width also. Hope it helps.

Answer 2

Works like a charm. What you've wanted:

$(document).ready(function() {

  const canvas = document.getElementById('myCanvas');
  let ctx = canvas.getContext('2d');

  let firstClick = true;

  let firstX, firstY;
  $(canvas).click(function(e) {
    if (firstClick) {
      ({
        x: firstX,
        y: firstY
      } = getMousePos(canvas, e));

      $('#firstX').html(firstX);
      $('#firstY').html(firstY);

      firstClick = false;
    } else {
      let {
        x: secondX,
        y: secondY
      } = getMousePos(canvas, e);

      let width = secondX - firstX;
      let height = secondY - firstY;
      ctx.strokeRect(firstX, firstY, width, height);

      $('#secondX').html(secondX);
      $('#secondY').html(secondY);
      $('#width').html(width);
      $('#height').html(height);

      firstClick = true;
    }

  });

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
<p><span id="firstX"></span>, <span id="firstY"></span></p>
<p><span id="secondX"></span>, <span id="secondY"></span></p>
<p><span id="width"></span>, <span id="height"></span></p>

Answer 3

The first thing you need is to get the position of the click.You need to find top and left value on click. For that the best you can use javascript or jquery.

Here is the code.

$('.clickable').bind('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');
    
    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;
    
    $display.text('x: ' + x + ', y: ' + y);
});

.clickable {
    border: 1px solid #333;
    background: #eee;
    height: 200px; width: 200px;
    margin: 15px;
    position: absolute;
}
.display {
    display: block;
    height: 16px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    top: 50%; margin-top: -8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='clickable'>
 <span class='display'></span>
</div>

Now after you get the coordinates you can easily draw rectangle on canvas.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(x,y,width,height);
ctx.stroke();