h5 canvas 画布填充图片

我是用canvas画布里面的方法，使用图片进行填充，主要使用这个方法ctx.fillRect(x,y,w,h)。

这个是填充的其中一个图片

上面的是渲染结果，我发现图片并不是按照指定的x,y开始重复填充的，像是从画布开始部分填充，才会出现这样的效果，不知道是我写的不对还是本来就是这样？求大佬指点

图元是下面的小图，顺序有点不对，希望谅解

建议使用drawImage方法