html5 中 canvas drawImage 无法缩放图片

Question

我想在手机游览器上开发一个简单的拼图游戏。因此使用了canvas

由于手机尺寸问题，我先要将图片适当的缩放。

width = screen.width-(2*CANVASMARGIN);
height = 336*(width/500);
var _img = new Image(width,height);
_img.src = "pic.jpg";

不用关心，缩放的逻辑，只需要注意到，我这边是进行了缩放。
然后我在画在canvas上。

_stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight);

这样能够完好运行起来，

然后我将图片裁剪，得到每个piece。
再绘画到canvas上

`stage.drawImage(img, piece.sx, piece.sy, pieceWidth, pieceHeight, xPos, yPos,pieceWidth,pieceHeight);`
其中，
_img是图像，
piece.sx和piece.sy是,每一片位于原图的位置
xPos和yPos是,要将该piece放置在canvas的那一个位置上。
pieceWidth,pieceHeight，是每一块大小。

然后得到

好像每一块都没有进行缩放，得到的原来的图像大小的分块。
我该怎么解决？

Answer 1

缩放就是吧原图指定区域上的像素点绘制到另一个区域上，如果2区域大小相同，就是简单赋值
如果新的区域比原来区域大，看到的就是放大的效果
如果比园区与小，那么就是缩小的效果，
关键在于前后2个区域的大小