title: Drawing a Rectangle in Canvas in JavaScript - Defining Rectangle Starting Pont
body: <p>This is my puzzle. I used some code from an online source to draw a rectangle using canvas and have been adjusting it to suit my needs. The original code worked fine, but it's clearly coded to start in the upper left-hand corner of the window; that much I understand from the code. Since my page for it requires it to be relative to the canvas location, not the window, this is a problem for me. When the rectangle is clicked to begin, the actual rectangle starts drawing some distance below the cursor; however further down and to the right the canvas is from (0,0). How do I make it see the canvas as the window to use to define the starting point?</p>
  
  <p>JavaScript:</p>
  
  <pre><code>   function getarea() {
           var wid = document.getElementById('wid').value;
           var hgt = document.getElementById('hgt').value;
           var area = (wid*hgt)
           var perim = (+wid + +hgt + +wid + +hgt)
           window.document.getElementById('area').innerHTML = area;
           window.document.getElementById('perim').innerHTML = perim;
        }
  
  
  var rect;
  var canvas;
  var context;
  var dragging;
  
  function Point(x, y) {
      this.x = x;
      this.y = y;
  }
  
  function Size(width, height) {
      this.width = width;
      this.height = height;
  }
  
  function Rectangle(start, size) {
      this.start = start;
      this.size = size;
  }
  
  function init() {
      canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");
  
      canvas.addEventListener("mousedown", startDragging, false);
      canvas.addEventListener("mouseup", stopDragging, false);
      canvas.addEventListener("mousemove", moved, false);
  
      var start = new Point(0, 0);
      var size = new Size(0, 0);
      rect = new Rectangle(start, size);
  
  
  }
  
  function startDragging(event) {
  clearRect(rect);
      dragging = true;
  
      // initialize start point
      var box=canvas.getBoundingClientRect();
      var offsetX=box.left;
      var offsetY=box.top;
  
      var mouseX = parseInt(event.clientX-offsetX);
      var mouseY = parseInt(event.clientY-offsetY);
  
      rect.start.x = mouseX;
      rect.start.y = mouseY;
  
  
      // initialize size
      rect.size.width = 0;
      rect.size.height = 0;
  }
  
  function stopDragging(event) {
      dragging = false;
  }
  
  function moved(event) {
      if(!dragging) return;
  
      var box=canvas.getBoundingClientRect();
      var offsetX=box.left;
      var offsetY=box.top;
  
      var mouseX = parseInt(event.clientX-offsetX);
      var mouseY = parseInt(event.clientY-offsetY);
  
      clearRect(rect);
      rect.size.width = event.pageX - rect.start.x;
      rect.size.height = event.pageY - rect.start.y;
      drawRect(rect);
  }
  
  function clearRect(rect) {
      context.clearRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
  }
  
  function drawRect(rect) {
      context.fillRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
  }
  </code></pre>
  
  <p>HTML (normally not as relevant to a JavaScript issue, but I'm including it since the amount of space defined in the HTML is related to the problem. I doubt it's important, but just in case.):</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
  &lt;script src="week5js.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet"href="assignment5.css"/&gt;
  
  &lt;link href="assignment5.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;header&gt;
  &lt;center&gt;
  Week 6: Unit 6 - Assignment 5
  &lt;/center&gt;
  &lt;/header&gt;
  
  
  &lt;body onload="init()"&gt;
  
      &lt;form id="areaform"&gt;
        &lt;label for="width"&gt;Width:&lt;/label&gt;
        &lt;input id="wid" name="width" type="number"&gt;
        &amp;nbsp
        &amp;nbsp
        &lt;label for="height"&gt;Height:&lt;/label&gt;
        &lt;input id="hgt" name="height" type="number"&gt;
        &lt;br&gt;&lt;/br&gt;
        &lt;label for="area1"&gt;Area:&lt;/label&gt;
        &lt;output id="area"&gt;&lt;/output&gt;
        &lt;br&gt;&lt;/br&gt;
        &lt;label for="perimeter1"&gt;Perimeter:&lt;/label&gt;
        &lt;output id="perim"&gt;&lt;/output&gt;
        &lt;br&gt;&lt;/br&gt;
        &lt;button onclick="getarea()" type="button"&gt;Get Area&lt;/button&gt;
      &lt;/form&gt;
  
  
  &lt;canvas id="canvas" width="673" height="550"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>canvas {
      background-color: #F0F0F0;
      border: 1px solid;
  }
  
  header{
  
  background-color: yellow;
  padding:15px;
  margin:30px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size:25px;
  background-color:#F0F0F0;
  border: 1px solid;
  
  }
  
  body{
  max-width:50%;
  padding:25px;
  margin:20px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size:16x;
  border: 2px dotted;
  box-shadow: 2px 2px 4px #404040;
  }
  
  body img{
  
  max-width:100%;
  
  }
  </code></pre>
  
  <p>So, to sum: I need to be able to draw a rectangle from a site, when I do the rectangle starting point is being affected by the canvas' relation to the window and messing everything up and placing the rectangle at a different point than intended. I need the rectangle to start at the cursor.</p>
  
  <p>Thank you!</p>