HTML5_ZoomInOut

by caiubyfreitas

HTML

<body onmousedown="return false;">
  <div id="wrapper">
    <canvas id="myCanvas" width="578" height="200">
    </canvas>
    <div id="buttonWrapper">
      <input type="button" id="plus" value="+">
      <input type="button" id="minus" value="-">
    </div>
  </div>
  <h2 id="status">
        0, 0
        </h2>
</body>

CSS

body {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  position: relative;
  border: 1px solid #9C9898;
  width: 578px;
  height: 200px;
}

#buttonWrapper {
  position: absolute;
  width: 30px;
  top: 2px;
  right: 2px;
}

input[type="button"] {
  padding: 5px;
  width: 30px;
  margin: 0px 0px 2px 0px;
}

JavaScript

var canvas = document.getElementById("myCanvas");

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);


$("#wrapper").mouseover(function(e) {
  $('#status').html(e.pageX + ', ' + e.pageY);
});

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  // clear canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.save();
  context.translate(translatePos.x, translatePos.y);
  context.scale(scale, scale);
  context.beginPath(); // begin custom shape
  context.moveTo(-119, -20);
  context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
  context.bezierCurveTo(-39, 80, 31, 80, 51, 50);
  context.bezierCurveTo(131, 50, 131, 20, 101, 0);
  context.bezierCurveTo(141, -60, 81, -70, 51, -50);
  context.bezierCurveTo(31, -95, -39, -80, -39, -50);
 ...