Updating cavas docs

src/API.ts

@@ -101,6 +101,8 @@ export type ShapeObject = {
   url: string,
   curve: number,
   curves: number,
+  stroke: string,
+  eaten: number,
 }
 
 export class UserAPI {
@@ -2515,6 +2517,7 @@ export class UserAPI {
     ctx.arc(x, y, radius, 0, 2 * Math.PI);
     ctx.fillStyle = fillStyle;
     ctx.fill();
+    ctx.closePath();
     return true;
   }
   circle = this.ball;
@@ -2546,6 +2549,23 @@ export class UserAPI {
     ctx.translate(x, y);
     ctx.rotate((rotate * Math.PI) / 180);
   
+    if(slices<2) {
+      ctx.beginPath();
+      ctx.arc(0, 0, radius, 0, 2 * Math.PI);
+      ctx.closePath();
+      ctx.fillStyle = slices<1 ? secondary : fillStyle;
+      ctx.fill();
+    
+      ctx.beginPath();
+      ctx.arc(0, 0, hole, 0, 2 * Math.PI);
+      ctx.closePath();
+      ctx.fillStyle = secondary;
+      ctx.fill();
+  
+      ctx.restore();
+      return true;
+    }
+
     // Draw slices as arcs
     const totalSlices = slices;
     const sliceAngle = (2 * Math.PI) / totalSlices;
@@ -2581,10 +2601,11 @@ export class UserAPI {
     return true;
   };
 
+
   public pie = (
-    slices: number = 3,
+    slices: number|ShapeObject = 3,
     eaten: number = 0,
-    radius: number | ShapeObject = this.hc() / 3,
+    radius: number = this.hc() / 3,
     fillStyle: string = "white",
     secondary: string = "black",
     stroke: string = "black",
@@ -2592,13 +2613,16 @@ export class UserAPI {
     x: number = this.wc(),
     y: number = this.hc(),
   ): boolean => {
-    if (typeof radius === "object") {
+    if (typeof slices === "object") {
-      fillStyle = radius.fillStyle || "white";
+      fillStyle = slices.fillStyle || "white";
-      x = radius.x || this.wc();
+      x = slices.x || this.wc();
-      y = radius.y || this.hc();
+      y = slices.y || this.hc();
-      rotate = radius.rotate || 0;
+      rotate = slices.rotate || 0;
-      slices = radius.slices || 3;
+      radius = slices.radius || this.hc() / 3;
-      radius = radius.radius || this.hc() / 3;
+      secondary = slices.secondary || "black";
+      stroke = slices.stroke || "black";
+      eaten = slices.eaten || 0;
+      slices = slices.slices || 3;
     }
   
     const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
@@ -2607,16 +2631,26 @@ export class UserAPI {
     ctx.translate(x, y);
     ctx.rotate((rotate * Math.PI) / 180);
   
+    if(slices<2) {
+      ctx.beginPath();
+      ctx.arc(0, 0, radius, 0, 2 * Math.PI);
+      ctx.closePath();
+      ctx.fillStyle = slices<1 ? secondary : fillStyle;
+      ctx.fill();
+      ctx.restore();
+      return true;
+    }
+
     // Draw slices as arcs
     const totalSlices = slices;
-    const sliceAngle = ((2 * Math.PI) / totalSlices);
+    const sliceAngle = (2 * Math.PI) / totalSlices;
     for (let i = 0; i < totalSlices; i++) {
       const startAngle = i * sliceAngle;
       const endAngle = (i + 1) * sliceAngle;
-      
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.arc(0, 0, radius, startAngle, endAngle);
+      ctx.lineTo(0, 0); // Connect to center
       ctx.closePath();
   
       // Fill and stroke the slices with the specified fill style
@@ -2628,10 +2662,9 @@ export class UserAPI {
         ctx.fillStyle = secondary;
       }
       ctx.lineWidth = 2;
-      ctx.strokeStyle = stroke;
       ctx.fill();
+      ctx.strokeStyle = stroke;
       ctx.stroke();
-      
     }
   
     ctx.restore();
@@ -2639,6 +2672,7 @@ export class UserAPI {
   };
   
 
+
   public star = (
     points: number|ShapeObject = 5,
     radius: number = this.hc()/3,

src/documentation/more/visualization.ts

@@ -7,7 +7,7 @@ export const visualization = (application: Editor): string => {
   return `
 # Vizualisation
 
-While Topos is mainly being developed as a live coding environment for algorithmic music composition, it also includes some features for live code visualizatoins. This section will introduce you to these features.
+While Topos is mainly being developed as a live coding environment for algorithmic music composition, it also includes some features for live code visualizations. This section will introduce you to these features.
 
 ## Hydra Visual Live Coding
 
@@ -50,7 +50,7 @@ ${makeExample(
   false,
 )}
 
-### Documentation
+### Hydra documentation
 
 I won't teach Hydra. You can find some great resources directly on the [Hydra website](https://hydra.ojack.xyz/):
   - [Hydra interactive documentation](https://hydra.ojack.xyz/docs/)
@@ -84,10 +84,13 @@ beat(0.25)::gif({
   false,
 )}
 
-
 ## Canvas live coding
 
-Documentation in progress! Copy the example and run it separately (Showing sualization examples in the documentation not implemented yet).
+Documentation in progress! Copy the example and run it separately (Showing visualization examples in the documentation not implemented yet).
+
+Canvas live coding is a feature that allows you to draw musical events to the canvas. Canvas can be used to create complex visualizations. The feature is based on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" target="_blank">Canvas API</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D" target="_blank">CanvasRenderingContext2D</a> interface. The feature is still in development and more functions will be added in the future.
+
+In addition to the standard Canvas API, Topos also includes some pre-defined shapes for convenience. See the Shapes section below for more info.
 
 * <ic>draw(f: Function)</ic> - Draws to a canvas with the given function.
 
@@ -117,6 +120,28 @@ beat(0.5) && clear() && draw(context => {
   false,
 )}
 
+${makeExample(
+"Using draw with events and shapes",
+`
+beat(0.25) && sound("bass1:5").pitch(rI(1,6)).draw(x => {
+donut(x.pitch)
+}).out()
+`,
+false,
+)}  
+
+
+${makeExample(
+"Using draw with ziffers and shapes",
+`
+z1("1/8 (0 2 1 4)+(2 1)").sound("sine").ad(0.05,.25).clear()
+.draw(x => {
+pie({slices:7,eaten:(7-x.pitch-1),fillStyle:"green", rotate: 250})
+}).log("pitch").out()
+`,
+false,
+)}
+
 * <ic<image(url, x, y, width, height, rotation)</ic> - Draws an image to a canvas.
 
 ${makeExample(
@@ -136,6 +161,8 @@ ${makeExample(
 
 ### Text to canvas
 
+Text can be drawn to canvas using the <ic>drawText()</ic> function. The function can take any unicode characters including emojis. The function can also be used to draw random characters from a given unicode range. Different filters can also be applied using the **filter** parameter. See filter in <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter" target="_blank">canvas documentation</a> for more info.
+
 * <ic>drawText(text, fontSize, rotation, font, x, y)</ic> - Draws text to a canvas.
 
 ${makeExample(
@@ -174,7 +201,10 @@ beat(0.5) && clear() && drawText({x: 10, y: epulse()%700, text: food(50)})
 
 ### Shapes
 
-In addition to supporting drawing to canvas directly, Topos also include some pre-defined shapes for convenience. The predefined shapes are:
+In addition to supporting drawing to canvas directly, Topos also include some pre-defined shapes for convenience. Every shape can be defined by either by inputting one object as parameter or by inputting the parameters separately.
+
+The predefined shapes are:
+
 * <ic>smiley(happiness, radius, eyes, fill, rotate, x, y)</ic>
 * <ic>ball(radius,fill,x,y)</ic>
 * <ic>box(width, height, fill, rotate)</ic>