title: Image not loading in HTML canvas
body: <p>I have a code that is used to re-size and drag/drop an image within the canvas.
  The problem is the image won't show. I have seen this code in other websites and it works for them (apparently), is there anything that I'm doing wrong?</p>
  
  <p>I have tried making the image resolution smaller than the canvas' but still to no avail.</p>
  
  <p>Following is my HTML:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="resizing.js"&gt;&lt;/script&gt;
      &lt;style&gt;
      body {
      background-color: ivory;
      padding:10px;
  }
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="canvas" width=350 height=350&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Following is my js:</p>
  
  <pre><code>    var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  var canvasOffset = $("#canvas").offset();
  var offsetX = canvasOffset.left;
  var offsetY = canvasOffset.top;
  
  var startX;
  var startY;
  var isDown = false;
  
  
  var pi2 = Math.PI * 2;
  var resizerRadius = 8;
  var rr = resizerRadius * resizerRadius;
  var draggingResizer = {
      x: 0,
      y: 0
  };
  var imageX = 50;
  var imageY = 50;
  var imageWidth, imageHeight, imageRight, imageBottom;
  var draggingImage = false;
  var startX;
  var startY;
  
  
  
  var init = function(){
  var img = new Image();
  img.onload = function () {
      imageWidth = img.width;
      imageHeight = img.height;
      imageRight = imageX + imageWidth;
      imageBottom = imageY + imageHeight
      draw(true, false);
  }
  img.src = "Newzeign.jpg";
  };
  window.addEventListener("load",init);
  
  function draw(withAnchors, withBorders) {
  
      // clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
  
      // draw the image
      ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);
  
      // optionally draw the draggable anchors
      if (withAnchors) {
          drawDragAnchor(imageX, imageY);
          drawDragAnchor(imageRight, imageY);
          drawDragAnchor(imageRight, imageBottom);
          drawDragAnchor(imageX, imageBottom);
      }
  
      // optionally draw the connecting anchor lines
      if (withBorders) {
          ctx.beginPath();
          ctx.moveTo(imageX, imageY);
          ctx.lineTo(imageRight, imageY);
          ctx.lineTo(imageRight, imageBottom);
          ctx.lineTo(imageX, imageBottom);
          ctx.closePath();
          ctx.stroke();
      }
  
  }
  
  function drawDragAnchor(x, y) {
      ctx.beginPath();
      ctx.arc(x, y, resizerRadius, 0, pi2, false);
      ctx.closePath();
      ctx.fill();
  }
  
  function anchorHitTest(x, y) {
  
      var dx, dy;
  
      // top-left
      dx = x - imageX;
      dy = y - imageY;
      if (dx * dx + dy * dy &lt;= rr) {
          return (0);
      }
      // top-right
      dx = x - imageRight;
      dy = y - imageY;
      if (dx * dx + dy * dy &lt;= rr) {
          return (1);
      }
      // bottom-right
      dx = x - imageRight;
      dy = y - imageBottom;
      if (dx * dx + dy * dy &lt;= rr) {
          return (2);
      }
      // bottom-left
      dx = x - imageX;
      dy = y - imageBottom;
      if (dx * dx + dy * dy &lt;= rr) {
          return (3);
      }
      return (-1);
  
  }
  
  
  function hitImage(x, y) {
      return (x &gt; imageX &amp;&amp; x &lt; imageX + imageWidth &amp;&amp; y &gt; imageY &amp;&amp; y &lt; imageY + imageHeight);
  }
  
  
  function handleMouseDown(e) {
      startX = parseInt(e.clientX - offsetX);
      startY = parseInt(e.clientY - offsetY);
      draggingResizer = anchorHitTest(startX, startY);
      draggingImage = draggingResizer &lt; 0 &amp;&amp; hitImage(startX, startY);
  }
  
  function handleMouseUp(e) {
      draggingResizer = -1;
      draggingImage = false;
      draw(true, false);
  }
  
  function handleMouseOut(e) {
      handleMouseUp(e);
  }
  
  function handleMouseMove(e) {
  
      if (draggingResizer &gt; -1) {
  
          mouseX = parseInt(e.clientX - offsetX);
          mouseY = parseInt(e.clientY - offsetY);
  
          // resize the image
          switch (draggingResizer) {
              case 0:
                  //top-left
                  imageX = mouseX;
                  imageWidth = imageRight - mouseX;
                  imageY = mouseY;
                  imageHeight = imageBottom - mouseY;
                  break;
              case 1:
                  //top-right
                  imageY = mouseY;
                  imageWidth = mouseX - imageX;
                  imageHeight = imageBottom - mouseY;
                  break;
              case 2:
                  //bottom-right
                  imageWidth = mouseX - imageX;
                  imageHeight = mouseY - imageY;
                  break;
              case 3:
                  //bottom-left
                  imageX = mouseX;
                  imageWidth = imageRight - mouseX;
                  imageHeight = mouseY - imageY;
                  break;
          }
  
          if(imageWidth&lt;25){imageWidth=25;}
          if(imageHeight&lt;25){imageHeight=25;}
  
          // set the image right and bottom
          imageRight = imageX + imageWidth;
          imageBottom = imageY + imageHeight;
  
          // redraw the image with resizing anchors
          draw(true, true);
  
      } else if (draggingImage) {
  
          imageClick = false;
  
          mouseX = parseInt(e.clientX - offsetX);
          mouseY = parseInt(e.clientY - offsetY);
  
          // move the image by the amount of the latest drag
          var dx = mouseX - startX;
          var dy = mouseY - startY;
          imageX += dx;
          imageY += dy;
          imageRight += dx;
          imageBottom += dy;
          // reset the startXY for next time
          startX = mouseX;
          startY = mouseY;
  
          // redraw the image with border
          draw(false, true);
  
      }
  
  
  }
  
  
  $("#canvas").mousedown(function (e) {
      handleMouseDown(e);
  });
  $("#canvas").mousemove(function (e) {
      handleMouseMove(e);
  });
  $("#canvas").mouseup(function (e) {
      handleMouseUp(e);
  });
  
  $("#canvas").mouseout(function (e) {
      handleMouseOut(e);
  });
  </code></pre>