---

public draw(target: CanvasRenderingTarget2D): void {
  const data = this.rectangle.getRenderData();

  if (!data) {
    return;
  }

  const { colors } = getThemeStore();

  target.useBitmapCoordinateSpace(({ context, horizontalPixelRatio, verticalPixelRatio }) => {
    const left = data.left * horizontalPixelRatio;
    const right = data.right * horizontalPixelRatio;
    const top = data.top * verticalPixelRatio;
    const bottom = data.bottom * verticalPixelRatio;

    context.save();

    if (data.showFill) {
      context.fillStyle = data.fillColor;
      context.fillRect(left, top, right - left, bottom - top);
    }

    context.lineWidth = UI.borderWidth * Math.max(horizontalPixelRatio, verticalPixelRatio);
    context.strokeStyle = data.borderColor;
    context.strokeRect(left, top, right - left, bottom - top);

    if (data.showHandles) {
      for (const handle of Object.values(data.handles)) {
        drawHandle(
          context,
          handle.x * horizontalPixelRatio,
          handle.y * verticalPixelRatio,
          horizontalPixelRatio,
          verticalPixelRatio,
          data.borderColor,
          colors.chartBackground,
        );
      }
    }

    context.restore();
  });
}



function drawHandle(
  context: CanvasRenderingContext2D,
  x: number,
  y: number,
  horizontalPixelRatio: number,
  verticalPixelRatio: number,
  strokeColor: string,
  fillColor: string,
): void {
  const width = UI.handleSize * horizontalPixelRatio;
  const height = UI.handleSize * verticalPixelRatio;
  const left = x - width / 2;
  const top = y - height / 2;

  context.save();
  context.fillStyle = fillColor;
  context.strokeStyle = strokeColor;
  context.lineWidth = UI.handleBorderWidth * Math.max(horizontalPixelRatio, verticalPixelRatio);

  context.beginPath();
  context.rect(left, top, width, height);
  context.fill();
  context.stroke();

  context.restore();
}