假设你是一个前端程序员，现在在canvas上一个已知XY坐标和方向th的点，你需要绘制一个长方形方块，长方形的长宽分别为20和10，，长方形的方向与点的th方向一致，你能给出一个函数输入点的信息然后绘制出来吗

当你说“在canvas上绘制”时，我假设你是在Web浏览器中使用JavaScript。下面是一个函数，它接受一个canvas元素、一个点的x坐标、一个点的y坐标和一个方向th（以弧度为单位），然后绘制一个长方形方块，长为20，宽为10，方向与点的方向一致。

function drawRectangle(canvas, x, y, th) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(th);
  ctx.fillRect(-10, -5, 20, 10);
  ctx.restore();
}

使用该函数的示例代码如下：

const canvas = document.getElementById('myCanvas');
drawRectangle(canvas, 100, 100, Math.PI / 4);

其中，`myCanvas`是一个HTML元素的ID，它应该是一个`<canvas>`元素。在这个示例中，我们在canvas上绘制了一个位于(100,100)，方向为45度的长方形方块。