2

I'm using canvas with predefined width and height, those are result of the available resource that I've to render.
The resources sizes are not always the same size as the screen (mobile device) so I "stretch" the document with "viewport" to get the optimal, kind of full screen look and fill appearance. This one works good and the application is running correct (based on PlayN).

The problem appeared when I was requested to open "external" pages in the application using iFrame. It appears that iFrame inherits the "viewport" from parent document and the content of the website is get broken (zoomed in or zoomed out).

I checked a solution where we keep the "viewport=1" but play with CSS to stretch the canvas, the application looks good but all the mouse/touch events are got broken, they receives the real (zoomed) position but my application expects position that is based on original canvas size.

Example here.

Any idea how to stretch the canvas and still keep the coordinates correct for the original dimension? 

<body>
    <canvas id="canvas" width="100px" height="100px" style="border: 1px solid black"></canvas>
</body>

var can = document.getElementsByTagName("canvas")[0];
can.style.width = "300px";
can.style.height = "300px";

can.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'x: ' + mousePos.x + ', y:' + mousePos.y;
    writeMessage(canvas, message);
}, false);

function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '8pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
  }

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
putvande
  • 15,068
  • 3
  • 34
  • 50
Arman Gal
  • 21
  • 2
  • Could you keep track of what the CSS zoom is doing, and just apply that transformation in reverse immediately upon receipt of mouse events? – zebediah49 Aug 15 '13 at 18:43
  • What is possible is to "catch" the mouse coordinates before they are communicated to the application logic, and "update" them to fit the original size, like I did in this example: http://jsfiddle.net/armangal/cqs2H/. The problem here is that I use PlayN and it means that I should change PlayN sources, something I didn't want to deal with... – Arman Gal Aug 19 '13 at 07:58
  • A possible solution to this case might be using experiential PlayN feature that should stretch the canvas and keep coordinates correct. **HtmlPlatform** has a boolean flag **experimentalFullscreen** that is set to false by default. – Arman Gal Sep 11 '13 at 05:44

0 Answers0