修剪画布上的drawimage保持画布中心

Question

我正在尝试编写一个HTML5应用程序，通过网络摄像头为身份证拍照。

这是向潜在摄影师展示的相机：

相机的想法是300x225，最终结果是红色框的内部（170x200）

使用我以为我从这张图片中了解到的drawImage()：

image http://www.html5canvastutorials.com/demos/tutorials/html5-canvas-image-crop/html5-canvas-image-crop-diagram.png

我制作了这段代码：

drawImage(video, 65, 12, 170, 200, 0, 0, 170, 200);

在我看来，这意味着以65px，12px，剪辑170px，200px开始剪辑。这显然是不对的，因为它产生了这个：

所以我得到170x200，但它仍然从图片的左上角开始？

tl; dr ：我如何从300x225画布中删除170x200居中的框？