Как сгенерировать квадратный canvas по картинке и отрезать лишнее?

Question

[Артем]

Привет! Как мне сделать canvas размером 200x200 из ссылки на картинку, причем чтобы картинка подгонялась под размер поля по ширине или высоте, а лишнее обрезалось?

Вот исходник:

<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

[Артем]

Пришлось включать мозг: jsfiddle.net/temakashin/5gazu4do