Axes of a Cartesian plane changing according to the HTML5(canvas) + JAVASCRIPT zoom

Question

Guys, here’s the thing, I’m doing it with js + html5 and canvas a program to plot graphics: I would like to implement a zoom + and -, as in the image, and return to the original zoom by clicking '='. My difficulty is the following: after zooming in, the Cartesian axes 'x' and 'y' have to change their values is not ?

Example: http://jsxgraph.uni-bayreuth.de/wp/examples/, after pressing the '+' button the values of the axes change, another example is the google chart, after zooming the values of the axes change.

I wanted more or less this, I wanted the idea of how to do this, change the values of the axes according to the zoom, or ready-made examples, or some similar solution!!!

Answer 1

Code adapted from: http://jsfiddle.net/ndYdk/7/

With the scale factor you apply only to the inside drawing(to the canvas inside points) without worrying about the canvas size.

function desenhar(escala, posicao){
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  context.save();
  context.translate(posicao.x, posicao.y);
  context.scale(escala, escala);
  context.beginPath();
  context.moveTo(80, 50);
  context.bezierCurveTo(20,-100, -139, -80, -30, 50);
  context.closePath();

  context.fillStyle = 'blue';
  context.fill();

  context.stroke();
  context.restore();
}

var iniciar = (function(){
  var canvas = document.getElementById("myCanvas");

  var posicao = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };

  var escala = 1.0;
  var fatorMultiplicacao = 0.8;

  document.getElementById("plus").addEventListener("click", function(){
    escala /= fatorMultiplicacao;
    desenhar(escala, posicao);
  }, false);

  document.getElementById("minus").addEventListener("click", function(){
    escala *= fatorMultiplicacao;
    desenhar(escala, posicao);
  }, false);

  desenhar(escala, posicao);
}());

<canvas id="myCanvas" style="width: 300px;"></canvas>
<input type="button" id="plus" value="+">
<input type="button" id="minus" value="-">