Javascript 画布调整图像对象大小并重复图案

我的画布是500px 500px。 我有一个500px 500px的png图像：

我想重新调整图像的大小，例如。。。100px 100px，然后使用重新调整大小的图像作为定义重复模式的一部分，然后将其作为填充样式在整个画布上重复。这就是我所做的

//...define canvas, ctx, width and height above

var image = new Image();
image.onload = function() {
  _self = this;
  drawBG();
}
image.src = 'img.png';

function drawBG() {
  var space = ctx.createPattern(_self, 'repeat');
  ctx.fillStyle = space;
  ctx.fillRect(0, 0, width, height);
}

现在，如果我想浪费自己的时间，这一切都很好。请看，空间图像的大小与画布的大小相同。我的问题是。。。如何首先调整原始图像的大小（在javascript中），然后用它创建一个模式

---

另外，如何在堆栈溢出时重新调整图像大小？我在这里展示的这幅图像太大了。

您可以在第二块屏幕外画布上绘制图像，使用

drawImage（img、x、y、resizedWidth、resizedHeight）

然后将此画布用作图案

var ctx=canvas.getContext（'2d'）；
var image=新图像（）；
image.onload=函数（）{
//创建屏幕外画布
var patt=document.createElement（'canvas'）；
//设置调整大小的宽度和高度
patt.width=50；
patt.height=50；
patt.getContext（'2d'）.drawImage（this，0,0，patt.width，patt.height）；
//将调整大小的画布传递给createPattern
图b（patt）；
}
image.src=http://lorempixel.com/500/500';
函数drawBG（图案画布）{
var space=ctx.createPattern（patterncavas，'repeat'）；
ctx.fillStyle=空间；
ctx.fillRect（0,0400200）；
}