Using HTML Canvas + Javascript to optimize and image + reduce filesize

I am making a Chrome extension which automatically takes a screenshot of the visible tab and download a JPG to your filesystem. That all works fine but the images are very large (~400kb for a 1280x720px image) and I want to optimize them (ideally around 40kb).

Here is the code I'm using:

var image = new Image();
    image.onload = function() {
        var canvas = screenshot.content;
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);

        // save the image
        var link = document.createElement('a');
        link.download = shotname + ".jpg";
        link.href = screenshot.content.toDataURL();
        link.click();
        screenshot.data = '';
    };
    image.src = screenshot.data; 

How can I optimize the image to reduce quality and filesize? I'd like to play around with different quality options so I can see what an acceptable use-case is.