假设 你是一个前端程序员，现在在canvas上一个已知XY坐标和方向th的点，你需要绘制一个长方形方块，长方形长为宽的两倍，长方形的朝向和点的th方向一致，长方形内部包括一个三角形，三角形朝向和点的方向一致，并且三角形的底边长度和长方形的宽度一致，顶点在长方形上，你能给出一个函数输入点的信息然后绘制出来吗

可以使用 Canvas 的 API 来实现。以下是一个函数示例，输入参数为点的信息：

function drawRectangle(x, y, th) {
  // 创建 Canvas 元素
  var canvas = document.createElement('canvas');
  canvas.width = 400;
  canvas.height = 400;
  document.body.appendChild(canvas);

  // 获取 Canvas 2D 上下文
  var ctx = canvas.getContext('2d');

  // 设置长方形的宽度和高度
  var width = 50;
  var height = width * 2;

  // 计算长方形的四个顶点坐标
  var x1 = x + width / 2 * Math.cos(th);
  var y1 = y + width / 2 * Math.sin(th);
  var x2 = x + height / 2 * Math.cos(th + Math.PI / 2);
  var y2 = y + height / 2 * Math.sin(th + Math.PI / 2);
  var x3 = x + width / 2 * Math.cos(th + Math.PI);
  var y3 = y + width / 2 * Math.sin(th + Math.PI);
  var x4 = x + height / 2 * Math.cos(th - Math.PI / 2);
  var y4 = y + height / 2 * Math.sin(th - Math.PI / 2);

  // 绘制长方形
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.lineTo(x4, y4);
  ctx.closePath();
  ctx.stroke();

  // 绘制三角形
  var triangleWidth = width;
  var tx1 = x + triangleWidth / 2 * Math.cos(th);
  var ty1 = y + triangleWidth / 2 * Math.sin(th);
  var tx2 = x + height / 2 * Math.cos(th + Math.PI / 2);
  var ty2 = y + height / 2 * Math.sin(th + Math.PI / 2);
  var tx3 = x + triangleWidth / 2 * Math.cos(th - Math.PI / 2);
  var ty3 = y + triangleWidth / 2 * Math.sin(th - Math.PI / 2);

  ctx.beginPath();
  ctx.moveTo(tx1, ty1);
  ctx.lineTo(tx2, ty2);
  ctx.lineTo(tx3, ty3);
  ctx.closePath();
  ctx.stroke();
}

你可以将点的信息传入该函数中进行绘制。注意，该函数只是一个示例，你需要根据实际需求进行调整。