假设 你是一个前端程序员，现在在canvas上一个已知XY坐标和方向th的点，你需要绘制一个长方形方块，长方形的朝向和点的th方向一致

首先，我们可以利用canvas提供的方法，来绘制一个长方形。

<canvas id="myCanvas"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  // 绘制长方形
  function drawRect(x, y, w, h) {
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.closePath();
    ctx.stroke();
  }

  // 已知点的坐标和方向，绘制朝向相同的长方形
  function drawRectWithDirection(x, y, th, w, h) {
    ctx.translate(x, y);
    ctx.rotate(th);
    drawRect(-w / 2, -h / 2, w, h);
    ctx.rotate(-th);
    ctx.translate(-x, -y);
  }

  // 画布大小
  canvas.width = 400;
  canvas.height = 400;

  // 测试
  drawRectWithDirection(200, 200, Math.PI / 4, 100, 50);
</script>

上述代码中，`drawRect`函数用于绘制一个长方形，接收四个参数，分别为长方形左上角的x、y坐标，以及长和宽。我们使用`rect`方法来绘制长方形，然后使用`stroke`方法来描边。

接着，我们定义了`drawRectWithDirection`函数，该函数接收五个参数，分别为长方形中心点的x、y坐标，以及方向th、长和宽。该函数利用`translate`方法将画布坐标系移动到长方形中心点，然后利用`rotate`方法旋转画布坐标系，使其朝向th方向。最后调用`drawRect`函数绘制长方形，并再次利用`rotate`方法和`translate`方法将画布坐标系恢复到原来位置。

最后，我们在测试代码中调用`drawRectWithDirection`函数，传入长方形中心点坐标、方向、长和宽，来绘制一个朝向相同的长方形。