Get images from Web cam Video and send it to RESTfull API using jQuery

Question

I am using jQuery to capture webcam feed when the page is loaded.

var video = document.querySelector("#videoElement");
var media;
var canvas = document.querySelector('canvas');
var x = 0.5;
var y = 0.30;
var ctx = canvas.getContext('2d');
ctx.scale(x, y);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var xurl = 'http://localhost:8080/xxx/';

function snapshot() {
    if (media) {
        ctx.drawImage(video, 0, 0);
        var rdata=canvas.toDataURL('image/png');

        $.ajax({
            url: xurl,
            type: "POST",
            crossDomain: true,
            data: rdata,
            dataType: "json",
            success: function(response) {
                var resp = JSON.parse(response)
                console.log(resp.status);
            },
            error: function(xhr, status) {
                console.log("error");
            }
        });

    }
}
canvas.addEventListener('click', snapshot, false);
if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, handleVideo, videoError);
}

function handleVideo(stream) {
    media = stream;
    video.src = window.URL.createObjectURL(stream);
}

function videoError() {
}

I am unable to wrap my head around the problems below:

• The image that is extracted to the canvas, I need the image to be re-scaled to same size as that of canvas. But only a section of the image is shown. even after increasing the size of the canvas, the image is scaled up but the section is still the same. I need the complete image to be shown in the same frame.
• When the I am trying to send the image over network with AJAX, the image is coming somewhat distorted(Horizontally stretched)

Can any one give me a good push/kick in the right direction as to what I am doing wrong..??