Javascript 矩形旋转在HTML画布中很奇怪

我画了一个矩形，然后旋转它。 然而，在我的代码中它看起来很奇怪。 我正在使用MapAPI并实现GroundOveray在地图上绘制矩形

我的绘图测试：

绘图结果

我的代码：

  // draw rectangle on the canvas by constructor
  function GroundOverlay(bounds) {
    this.bounds = bounds;
    this.node = document.createElement("canvas");
    this.node.style.backgroundColor = "yellow";
    this.node.style.opacity = "0.5";
    this.node.style.position = "absolute";
    this.ctx = this.node.getContext("2d");
    this.width = 175;
    this.height = 65;
    this.startX = 65;
    this.startY = 65;

    this.ctx.beginPath();
    this.ctx.translate(
      this.startX + this.width / 2,
      this.startY + this.height / 2
    );
    this.ctx.rotate((30 * Math.PI) / -180);
    this.ctx.fillRect(-175 / 25, -20 / 2, 175, 20);
    this.ctx.fillStyle = "black";
  }

  GroundOverlay.prototype = new kakao.maps.AbstractOverlay();

  GroundOverlay.prototype.onAdd = function() {
    var panel = this.getPanels().overlayLayer;
    panel.appendChild(this.node);
  };

  // mapping on the api map
  GroundOverlay.prototype.draw = function() {
    var projection = this.getProjection();
    var ne = projection.pointFromCoords(this.bounds.getNorthEast());
    var sw = projection.pointFromCoords(this.bounds.getSouthWest());

    var width = ne.x - sw.x;
    var height = sw.y - ne.y;

    this.node.style.top = ne.y + "px";
    this.node.style.left = sw.x + "px";
    this.node.style.width = width + "px";
    this.node.style.height = height + "px";
  };

  GroundOverlay.prototype.onRemove = function() {
    this.node.parentNode.removeChild(this.node);
  };

  var sw = new kakao.maps.LatLng(37.54989262685873, 127.04985765049643),
    ne = new kakao.maps.LatLng(37.55036983933805, 127.05060203264918);

  var bounds = new kakao.maps.LatLngBounds(sw, ne);

  var overlay = new GroundOverlay(bounds);
  overlay.setMap(map);

---

画布的属性宽度或高度是否可能与画布的CSS宽度或高度不同<代码>画布.widthvs

canvas.style.width