// js/canvasManager.js

/**
 * Zeichnet alle Shapes auf dem Canvas neu
 * @param {HTMLCanvasElement} canvas 
 * @param {Array} shapesArray - Array der Shapes aus dem Dokument
 */
export function drawAllShapesOnCanvas(canvas, shapesArray) {
    const ctx = canvas.getContext("2d");
  
    // Canvas leerräumen
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    shapesArray.forEach(shape => {
      if (shape.type === "circle") {
        drawCircle(ctx, shape);
      } else if (shape.type === "triangle") {
        drawTriangle(ctx, shape);
      }
    });
  }
  
  /**
   * Zeichnet einen Kreis
   * @param {CanvasRenderingContext2D} ctx 
   * @param {Object} circle 
   */
  function drawCircle(ctx, circle) {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
    ctx.fillStyle = circle.color || "black";
    ctx.fill();
  }
  
  /**
   * Zeichnet ein Dreieck
   * @param {CanvasRenderingContext2D} ctx 
   * @param {Object} triangle 
   */
  function drawTriangle(ctx, triangle) {
    const [p1, p2, p3] = triangle.coordinates;
    ctx.beginPath();
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.lineTo(p3.x, p3.y);
    ctx.closePath();
    ctx.fillStyle = triangle.color || "black";
    ctx.fill();
  }