title: HTML5 Canvas Uploaded Image Scale/Zoom with Buttons Coding
body: <p>I am pretty much a noob with this and am trying to create 2 layers.  The top layer I have as a fixed image and the bottom image is an uploaded one.  I want to be able to manipulate the image on the bottom.  I have a code from  </p>
  
  <p><a href="http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/#comment-19246" rel="nofollow">http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/#comment-19246</a></p>
  
  <p>but I can't alter it so that the buttons would apply to the uploaded image.</p>
  
  <p>Here is what I have on html side, which creates the 2 layers and uploads the fixed image on top:  </p>
  
  <pre><code>&lt;input type="file" id="files" name="files[]" multiple onchange="handleFileSelect(this.files)"/&gt;
  
          &lt;div&gt;
              &lt;input type="button" id="plus" value="+"&gt;&lt;input type="button" id="minus" value="-"&gt;
          &lt;/div&gt;
  
  
  
  
  &lt;div id="canvasesdiv" style="position:relative; width:400px; height:300px"&gt;
  &lt;canvas id="layer2"
  style="z-index: 1;
  position:absolute;
  left:0px;
  top:0px;
  " height="300px" width="400"&gt;
  This text is displayed if your browser does not support HTML5 Canvas.
  &lt;/canvas&gt;
  
  &lt;canvas id="layer1"
  style="z-index: 2;
  position:absolute;
  left:0px;
  top:0px;
  " height="300px" width="400"&gt;
  This text is displayed if your browser does not support HTML5 Canvas.
  &lt;/canvas&gt;&lt;/div&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
  var c=document.getElementById("layer1");
  var ctx=c.getContext("2d");
  var img=new Image();
  img.onload = function(){
  ctx.drawImage(img,0,0);
  };
  img.src="assets/images/testsquare.png";
  &lt;/script&gt;
  </code></pre>
  
  <p>This is what I have on the script side to for the altering:</p>
  
  <pre><code>    &lt;script&gt;
          function draw(scale, translatePos){
              var canvas = document.getElementById("layer1");
              var context = canvas.getContext("2d");
  
              // clear canvas
              context.clearRect(0, 0, canvas.width, canvas.height);
  
              context.save();
  
              context.restore();
          }
  
          window.onload = function(){
              var canvas = document.getElementById("layer1");
  
              var translatePos = {
                  x: canvas.width / 2,
                  y: canvas.height / 2
              };
  
              var scale = 1.0;
              var scaleMultiplier = 0.8;
              var startDragOffset = {};
              var mouseDown = false;
  
              // add button event listeners
              document.getElementById("plus").addEventListener("click", function(){
                  scale /= scaleMultiplier;
                  draw(scale, translatePos);
              }, false);
  
              document.getElementById("minus").addEventListener("click", function(){
                  scale *= scaleMultiplier;
                  draw(scale, translatePos);
              }, false);
  
              // add event listeners to handle screen drag
              canvas.addEventListener("mousedown", function(evt){
                  mouseDown = true;
                  startDragOffset.x = evt.clientX - translatePos.x;
                  startDragOffset.y = evt.clientY - translatePos.y;
              });
  
              canvas.addEventListener("mouseup", function(evt){
                  mouseDown = false;
              });
  
              canvas.addEventListener("mouseover", function(evt){
                  mouseDown = false;
              });
  
              canvas.addEventListener("mouseout", function(evt){
                  mouseDown = false;
              });
  
              canvas.addEventListener("mousemove", function(evt){
                  if (mouseDown) {
                      translatePos.x = evt.clientX - startDragOffset.x;
                      translatePos.y = evt.clientY - startDragOffset.y;
                      draw(scale, translatePos);
                  }
              });
  
              draw(scale, translatePos);
          };
      &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated</p>