Draw a rectangle in JavaScript with mouse

Question

I am a JavaScript beginner, an want to make my first website.

I have a rectangle, and i would like to draw another one inside of this rectangle with the mouse.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(0, 20, canvas.width, 50);
context.fillStyle = "blue";
context.fill();

var canvasOffset;
var offsetX;

var startX

canvasOffset = $("#myCanvas").offset();
offsetX = canvasOffset.left;

canvas.addEventListener("mousedown", function() {
  canvas.style.cursor = "ew-resize";

  startX = parseInt(event.clientX - offsetX);
  document.getElementById("info").innerHTML = "X position: " + startX;
});

canvas.addEventListener("mouseup", function() {
  canvas.style.cursor = "default";

  var mouseX = parseInt(event.clientX - offsetX);

  context.beginPath();
  context.rect(startX, 20, mouseX - startX, 50);
  context.fillStyle = "red";
  context.fill();

  document.getElementById("info").innerHTML = "X old: " + startX + " - X new :" + (mouseX) + " - Length: " + (mouseX - startX);
});

body {
  background-color: ivory;
}

header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}

section {
  text-align: center;
  background-color: green;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}

canvas {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 80%;
  height: 90px;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h1></h1>
</header>
<section>
  <canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
  <p id="info"></p>
</section>
<footer>David Kester</footer>

If you try on the blue rectangle you will understand what i want. The problem is that the new rectangle won't be draw from were we click to where we release the mouse. it has an offset.

I do not know what is wrong, it might be something about the offset and coordinates. But i already tried something other people implementations but it does not work with me.

Could it be that i am messing with pixels and non pixels? in the CSS i have pixels.

Answer 1

Your main issue here is you are only setting the size of the canvas using css which causes stretching issues. This is alright to do so long as you factor in the stretch factor (scaling). You also need to consider that the offset of the canvas changes if you resize the window after it has been loaded so you need to start your events off with the following code.

var scale = canvas.attr("width") / canvas.width(),
    offsetX = $("#myCanvas").offset().left;

Also you need to set the canvas width and height attribute for this to function properly. You can set the width to anything but the higher the number the better the detail.

<canvas id="myCanvas" width="300" height="90">
    Your browser does not support the HTML5 canvas tag.
</canvas>

Another tip is to use jQuery functions more for event handling, element selection, and attribute setting.

var canvas = $("#myCanvas");
...
canvas.mouseup(function () {
    ...
    canvas.attr("cursor", "ew-resize");
    ...
});
...
canvas.mousedown(function () {
    ...
});

Here's a functioning code snippet:

var canvas = $("#myCanvas"),
  context = canvas[0].getContext("2d"),
  startX;

context.rect(0, 20, canvas[0].width, 50);
context.fillStyle = "blue";
context.fill();

canvas.mousedown(function() {
  var scale = canvas.attr("width") / canvas.width(),
    offsetX = $("#myCanvas").offset().left;

  canvas.attr("cursor", "ew-resize");

  startX = parseInt((event.clientX - offsetX) * scale);
  document.getElementById("info").innerHTML = "X position: " + startX;
});

canvas.mouseup(function() {
  var scale = canvas.attr("width") / canvas.width(),
    offsetX = $("#myCanvas").offset().left;

  canvas.attr("cursor", "default");

  var mouseX = parseInt((event.clientX - offsetX) * scale);

  context.beginPath();
  context.rect(startX, 20, mouseX - startX, 50);
  context.fillStyle = "red";
  context.fill();

  document.getElementById("info").innerHTML = "X old: " + startX + " - X new :" + (mouseX) + " - Length: " + (mouseX - startX);
});

body {
  background-color: ivory;
}

header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}

section {
  text-align: center;
  background-color: green;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}

canvas {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 80%;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>

  <h1></h1>

</header>
<section>
  <canvas id="myCanvas" width="300" height="90">Your browser does not support the HTML5 canvas tag.</canvas>
  <p id="info"></p>
</section>
<footer>David Kester</footer>

Source