相对于HTML5画布缩放文档上的鼠标坐标

Question

I have a HTML5 canvas of a certain size on the page

<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;">

Right now, the canvas is painted when the mouse is dragged over it (ie you click first(not necessarily inside the canvas) then start dragging the mouse over it without releasing) Script below;

  $(function () {
  var c = document.getElementById("canvas");
  var context = c.getContext("2d");
  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;
  var $canvas=$("#canvas");

  $(this).mousedown(function (e) {         

      paint = true;
      addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop);
      redraw();
  });


  $(this).mousemove(function (e) {
      if (paint) {
          addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop, true);
          redraw();
      }
  });

  $(this).mouseup(function (e) {
      paint = false;
  });

  $(this).mouseleave(function (e) {
      paint = false;
  });

  function addClick(x, y, dragging) {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
  }

  function redraw() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

      context.strokeStyle = "#000000";
      context.lineJoin = "round";
      context.lineWidth = 2;

      for (var i = 0; i < clickX.length; i++) {
          context.beginPath();
          if (clickDrag[i] && i) {
              context.moveTo(clickX[i - 1], clickY[i - 1]);
          } else {
              context.moveTo(clickX[i] - 1, clickY[i]);
          }
          context.lineTo(clickX[i], clickY[i]);
          context.closePath();
          context.stroke();
      }
  }

});

What I need now is a way to scale all the mouse coordinates on document during the document's mouse events to the relative coordinates inside the canvas.

so that no matter wherever you drag the mouse on the document it is drawn inside the canvas (in relatively small size of course). Any Idea how to achieve this?

http://jsfiddle.net/umwc5/3/

Why I need this?

It is for a signature application, When a user scribbles the signature using a tablet on a page(without seeing the page!) the entire signature is to be registered in a small canvas.

Update

The final working fiddle

Answer 1

The most important thing you were missing here was to multiply by the canvas/screen ratio.

First calculate the ratio:

  var docToCanv = Math.min($canvas[0].width / $('body').width(), $canvas[0].height/$('body').height());

Then use it like this:

addClick(e.pageX*docToCanv, e.pageY*docToCanv);

Depending on the additional behavior you want, you may need to adjust the location a bit, but this should get you past the current issue you are having.

Demo