Crop an Image Based on Coordinates

I have an img tag, I want to crop it based on the user's input coordinates and desired width and height. For example, below is my html code:

<img id="img_captured" src="smiley.jpg"></img>

Below are my coordinates which are coordinates of the top left corner of the selected part of the image to be crop.

x1 : 20
y1 : 20

Image Desired Dimensions:

width: 50px
height: 50px

After cropping the image, I want it to assign to the image tag with an id of "img_captured".

var y = documentGetElemenById("img_captured");
y.src = //croppedImage;

How to do it in JavaScript?