---

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

  if (!data) {
    return;
  }

  const { colors } = getThemeStore();

  target.useBitmapCoordinateSpace(({ context, horizontalPixelRatio, verticalPixelRatio }) => {
    const pixelRatio = Math.max(horizontalPixelRatio, verticalPixelRatio);

    const startX = data.startPoint.x * horizontalPixelRatio;
    const startY = data.startPoint.y * verticalPixelRatio;
    const directionX = data.directionPoint.x * horizontalPixelRatio;
    const directionY = data.directionPoint.y * verticalPixelRatio;
    const endX = data.rayEndPoint.x * horizontalPixelRatio;
    const endY = data.rayEndPoint.y * verticalPixelRatio;

    context.save();

    context.lineWidth = UI.lineWidth * pixelRatio;
    context.strokeStyle = data.lineColor;
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(endX, endY);
    context.stroke();

    if (data.showHandles) {
      context.fillStyle = colors.chartBackground;
      context.strokeStyle = data.lineColor;
      context.lineWidth = UI.handleBorderWidth * pixelRatio;

      drawHandle(context, startX, startY, UI.handleRadius * pixelRatio);
      drawHandle(context, directionX, directionY, UI.handleRadius * pixelRatio);
    }

    context.restore();
  });
}