css - HTML canvas resize and mouse coordinates -
i'm using canvas predefined width , height, result of available resource i've render.
resources sizes not same size screen (mobile device) "stretch" document "viewport" optimal, kind of full screen , fill appearance. 1 works , application running correct (based on playn).
the problem appeared when requested open "external" pages in application using iframe. appears iframe inherits "viewport" parent document , content of website broken (zoomed in or zoomed out).
i checked solution keep "viewport=1" play css stretch canvas, application looks mouse/touch events got broken, receives real (zoomed) position application expects position based on original canvas size.
example here.
any idea how stretch canvas , still keep coordinates correct 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 }; }
Comments
Post a Comment