Javascript Canvas Image resizing with noise seaparately with height and width with Aspect Ratio?

When i resize the image the image becomes noisy e.g in the example image a demonstration has been shown the above image has become noisy after resizing some assistance is needed.?

enter code here
function imageResize_h() {
    screenShot = new Image();
    screenShot.src = imgy;
    var canvasContext = canvas.getContext("2d");
    thumbHeight = thumb_h.value;
    screenShot.onload = function () {
        newHeight = Math.floor(screenShot.height * (0.61));
        if (newHeight < thumbHeight) {
            newHeight = thumbHeight
        };
        newWidth = Math.floor(screenShot.width / screenShot.height * newHeight);
        if (newHeight >= thumbHeight) {
            canvas.width = newWidth;
            canvas.height = newHeight;

            canvasContext.webkitImageSmoothingEnabled = false;
            canvasContext.mozImageSmoothingEnabled = false;
            canvasContext.imageSmoothingEnabled = false;

            canvasContext.drawImage(screenShot, 0, 0, newWidth, newHeight);
            imgy = canvas.toDataURL();
            screenShot.height = newHeight;
            image.load(imgy, imageLoaded)
        }
    }
}