51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
// 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();
|
|
}
|
|
|