title: Drawing a rectangle on Canvas
body: <p>I am trying to create a simple canvas program where the user can consistently create new shapes. This one is just a basic rectangle creator (I am hoping to expand it more to circles, lines, and maybe even other stuff). Right now though I have created something that is working in a really weird way. </p>
  
  <pre><code> &lt;html&gt;
      &lt;head&gt;
      &lt;meta chartset="utf-8"&gt;
      &lt;title&gt;Dragging a square&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          var canvas, context, startX, endX, startY, endY;
          var mouseIsDown = 0;
  
          function init() {
              canvas = document.getElementById("canvas");
              context = canvas.getContext("2d");
  
              canvas.addEventListener("mousedown", mouseDown, false);
              canvas.addEventListener("mousemove", mouseXY, false);
  
              document.body.addEventListener("mouseup", mouseUp, false);
          }
  
          function mouseUp() {
              mouseIsDown = 0;
              //mouseXY();
          }
  
          function mouseDown() {
              mouseIsDown = 1;
              startX = event.clientX;
              startY = event.clientY;
              mouseXY();
          }
  
          function mouseXY(eve) {
              if (!eve) {
                  var eve = event;
              }
              endX = event.pageX - canvas.offsetLeft;
              endY = event.pageY - canvas.offsetTop;
  
              drawSquare();
          }
  
          function drawSquare() {
              // creating a square
              var width = Math.abs(startX - endX);
              var height = Math.abs(startY - endY);
  
              context.beginPath();
              context.rect(startX, startY, width, height);
              context.fillStyle = "yellow";
              context.fill();
              context.lineWidth = 7;
              context.strokeStyle = 'black';
              context.stroke();
  
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="init()"&gt;
      &lt;canvas id="canvas" width="400" height="400" style="border: 1px solid black; cursor: pointer;"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Sorry about the slightly weird formatting when I copy and pasted my code. I think the problem is my mouseXY function. What I want is the user to click somewhere on the canvas a drag the mouse to create a rectangle, when the user lets go that is the end of that operation and they can create a whole new rectangle right after. At this point the program kind of just lets me click and create a new rectangle but if I let go of the mouse button it doesn't stop, in fact I have to click again to make it stop which then creates a new rectangle. I am still very new to this and I am having a lot of trouble with this, I will continue to work on this and if I figure it out I will let the site know. Thank you and have a great day!</p>
  
  <hr>
  
  <p>Well I got this to work (thanks to @Ken) but now I am trying to solve a new problem. I want to be able to put multiple rectangles on the canvas. I created a function that represents the Rectangle and then created a draw function within the rectangle function to draw out a rectangle. I created a new function called addShape() that ideally creates the rectangle object and pushes into an array called  square and drawShapes() that is supposed to erase everything on the canvas and redraws everything. Here is what I have so far:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;meta chartset="utf-8"&gt;
      &lt;title&gt;Dragging a square&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          function Rectangle(canvas, x, y, width, height,color) {
              //this.context = canvas.getContext("2d");
  
              this.x = x;
              this.y = y;
              this.width = width;
              this.height = height;
              this.color = color;
  
              this.draw = function() {
  
                  this.context.globalAlpha = 0.85;
                  this.context.beginPath();
                  this.context.rect(this.x, this.y, this.width, this.height);
                  this.context.fillStyle = this.color;
                  this.context.strokeStyle = "black";
                  this.context.lineWidth = 1;
  
                  this.context.fill();
                  this.context.stroke();
              };
  
          };
  
          // hold the canvas and context variable, as well as the 
          // starting point of X and Y and the end ones
          var canvas, context, startX, endX, startY, endY;
          var mouseIsDown = 0;
  
          // An array that holds all the squares
          var squares = [];
  
          window.onload = function() {
              canvas = document.getElementById("canvas");
              context = canvas.getContext("2d");
  
              canvas.addEventListener("mousedown", mouseDown, false);
              canvas.addEventListener("mousemove", mouseXY, false);
              canvas.addEventListener("mouseup", mouseUp, false);
          }
  
          function mouseUp(eve) {
              if (mouseIsDown !== 0) {
                  mouseIsDown = 0;
                  var pos = getMousePos(canvas, eve);
                  endX = pos.x;
                  endY = pos.y;
  
                  //Square(); //update on mouse-up
                  addShape(); // Update on mouse-up
              }
          }
  
          function mouseDown(eve) {
              mouseIsDown = 1;
              var pos = getMousePos(canvas, eve);
              startX = endX = pos.x;
              startY = endY = pos.y;
              // Square(); //update
              addShape();
          }
  
          function mouseXY(eve) {
  
              if (mouseIsDown !== 0) {
                  var pos = getMousePos(canvas, eve);
                  endX = pos.x;
                  endY = pos.y;
  
                  //Square();
                  addShape();
              }
          }
  
          function getMousePos(canvas, evt) {
              var rect = canvas.getBoundingClientRect();
              return {
                  x: evt.clientX - rect.left,
                  y: evt.clientY - rect.top
              };
          }
  
          function addShape() {
              var w = endX - startX;
              var h = endY - startY;
              var offsetX = (w &lt; 0) ? w : 0;
              var offsetY = (h &lt; 0) ? h : 0;
              var width = Math.abs(w);
              var height = Math.abs(h);
  
              var s = new Rectangle(startX + offsetX, startY + offsetY, width, height, "yellow");
  
              squares.push(s);
  
              // Update the display
              drawShapes();
          }
  
          function drawShapes() {
              context.clearRect(0,0,canvas.width,canvas.height);
  
              for (var i = 0; i &lt; squares.length; i++) {
                  var shape = squares[i];
                  shape.draw();
              };
          }
  
          function clearCanvas() {
              squares = [];
  
              drawShapes();
          }
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="addShape()"&gt;
      &lt;canvas id="canvas" width="400" height="400" style="border: 1px solid black; cursor: pointer;"&gt;&lt;/canvas&gt;&lt;br&gt;
      &lt;button onclick="clearCanvas()"&gt;Clear Canvas&lt;/button&gt;
  &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I am pretty sure I broke the original code... thank you for any help!</p>