javascript - HTML5 video webcam match resolution -

i trying use webcam take snapshot. have overlayed rectangle cropped area when photo taken. when take photo image captured zoomed in. how make image same area within rectangle? https://jsfiddle.net/fzrlvbwf/9/

    var timer = null; var timeto = 3; // time in seconds capture var video = document.getelementbyid('videoelement');  function handlevideo(stream) {   video.src = window.url.createobjecturl(stream); }  function videoerror(e) {  }  function init() {   setupcamera();    // draw crop area box   var c = document.getelementbyid("rectelement");   var ctx = c.getcontext("2d");   c.width = 480;   c.height = 360;   ctx.linewidth = "4";   ctx.strokestyle = "red";   ctx.rect(120, 50, 240, 260);   ctx.stroke();    document.getelementbyid('btnphoto').onclick = function() {      var video = document.getelementbyid("videoelement");     var canvas = document.getelementbyid('snapshot-canvas');     var ctx = canvas.getcontext('2d');     var printimg = document.getelementbyid('print-img');      canvas.width = 240;     canvas.height = 260;      // transform canvas image matches video horitontal flipped image     ctx.translate(canvas.width, 0);     ctx.scale(-1, 1);      var x = (video.videowidth - canvas.width) / 2;     var y = (video.videoheight - canvas.height) / 2;     //ctx.drawimage(video, x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);     ctx.drawimage(video, 120, 50, 240, 260, 0, 0, 240, 260);      var dataurl = canvas.todataurl('image/jpeg');     printimg.src = dataurl;    } }  function dophoto() {  }  function setupcamera() {   navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia || navigator.ogetusermedia;    if (navigator.getusermedia) {     navigator.getusermedia({       video: true     }, handlevideo, videoerror);    } }  init(); 

i found video 640 x 480 needed find ratio

var rx = (video.videowidth / videocontainer.clientwidth); var ry = (video.videoheight / videocontainer.clientheight);  ctx.drawimage(video, 120 * rx, 50 * ry, 240 * rx, 260 * ry, 0, 0, 240, 260); 

https://jsfiddle.net/fzrlvbwf/11/