How to generate a square canvas from an image and cut off the excess?

Question

Canvas

Hey! How can I make a 200x200 canvas from a link to an image, so that the image fits the size of the field in width or height, and the excess is cut off?
Here is the source:

<canvas id="example" width="200" height="200">
    <script>
            var canvas = document.getElementById('example')
              , context = canvas.getContext('2d')
              , imageObj = new Image();

            imageObj.onload = function() {
                // draw cropped image
                var sourceX = 0;
                var sourceY = 0;
                var sourceWidth = 200;
                var sourceHeight = 200;
                var destWidth = sourceWidth;
                var destHeight = sourceHeight;
                var destX = canvas.width / 2 - destWidth / 2;
                var destY = canvas.height / 2 - destHeight / 2;

                context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
            };
            imageObj.src = 'http://shechive.files.wordpress.com/2011/08/kitty-cat-18.jpg';
    </script>

Answer 1

I had to turn on the brain: jsfiddle.net/temakashin/5gazu4do