update engine

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litecanvas/playground",
-  "version": "1",
+  "version": "2",
   "description": "",
   "main": "src/index.js",
   "type": "module",

public/about.html

@@ -307,12 +307,16 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
  */
 
 // clear the canvas
+// if color is a number, fill the entire screen with which color
+// if null just clear the screen
 cls(color: number | null): void
 
 // draw a color-filled rectangle
+// radii is for border radius
 rectfill(x, y, w, h, color = 0, radii?: number | number[]): void
 
 // draw a outline rectangle
+// radii is for border radius
 rect(x, y, w, h, color = 0, radii?: number | number[]): void
 
 // draw a color-filled circle
@@ -321,7 +325,7 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
 // draw a outline circle
 circ(x, y, r, color = 0): void
 
-// draw a line
+// draw a line from one point (x1, y1) to another (x2, y2)
 line(x1, y1, x2, y2, color = 0): void
 
 // Sets the thickness of lines
@@ -335,22 +339,22 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
  */
 
 // draw a text
-text(x, y, text, color = 3): void
+text(x, y, text, color? = 3): void
 
 // set the text alignment and baseline
 // default values: align = 'start', baseline = 'top'
 // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
 // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline
 textalign(align: string, baseline: string): void
 
-// set the default font family
-// default: 'sans-serif'
+// set the font family for texts
 textfont(fontName: string): void
 
 // Sets the font size (default: 32)
 textsize(size: number): void
 
-// Used to draw a text as 'bold' or 'italic'
+// Used to draw a text as 'bold' or/and 'italic'
+// use "normal" or empty string to reset the font style
 textstyle(style: string)
 
 // Returns the text dimensions like width and height
@@ -365,15 +369,15 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
 // draw a image
 image(x, y, image: Image|HTMLCanvasElement): void
 
-/**
- * IMAGE DRAWING-RELATED FUNCTIONS
- */
-
-// create a offcanvas and to make an image
-// see: https://github.com/litecanvas/game-engine/blob/main/samples/paint/paint.js
+// create a offcanvas and to make an image on it
+// data can be a array of strings (to draw pixel art)
 // see: https://github.com/litecanvas/game-engine/blob/main/samples/pixelart/pixelart.js
-// note: options argument is `{scale: number, canvas: OffscreenCanvas}`
-paint(width, height, draw: string[]|function, options?): OffscreenCanvas
+// or data can be a function with drawing operations
+// see: https://github.com/litecanvas/game-engine/blob/main/samples/paint/paint.js
+// the options are:
+//   * scale?: default = 1.
+//   * canvas?: by default creates a new canvas.
+paint(width, height, data: string[]|function, options?): OffscreenCanvas
 
 /**
  * ADVANCED DRAWING-RELATED FUNCTIONS
@@ -393,16 +397,16 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
 translate(x: number, y: number): void
 
 // Adds a scaling transformation to the canvas units
-// horizontally and/or vertically
+// horizontally (x) and/or vertically (y)
 scale(x: number, y?: number): void
 
 // Adds a rotation to the transformation matrix
 rotate(radians: number): void
 
 // update the transformation matrix
 // when `resetFirst = true` uses `context.setTransform()`
-// wwhen `resetFirst = false` uses `context.transform()`
 // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
+// when `resetFirst = false` uses `context.transform()`
 // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
 transform(a, b, c, d, e, f, resetFirst = true): void
 
@@ -552,6 +556,8 @@ <h2><a id="math">Math</a></h2>
 // If the number is 0, it will returns 0.
 sign(n: number): number
 
+/** UTILS */
+
 // Check a collision between two rectangles.
 // All arguments are required and must be numbers.
 colrect(x1, y1, w1, h1, x2, y2, w2, h2): boolean
@@ -567,7 +573,7 @@ <h2><a id="math">Math</a></h2>
 // A value of 0 freezes time (equivalent to pausing).
 timescale(value: number): void</code></pre>
 
-      <h2><a id="globals">Variables</a></h2>
+      <h2><a id="globals">Global Variables</a></h2>
 
       <pre><code class="language-typescript">// the game canvas
 CANVAS: HTMLCanvasElement
@@ -610,23 +616,23 @@ <h2><a id="globals">Variables</a></h2>
 
       <h2><a id="events">Event Emitter</a></h2>
 
-      <pre><code class="language-typescript">// Adds a game event listener and
-// returns a function that removes the listener.
+      <pre><code class="language-typescript">// Registers a game event callback and
+// returns a function that unregister this callback.
 listen(event: string, callback: Function): Function
 
-// Triggers a game event and call all listeners.
-emit(event: string, ...data: any[]): void</code></pre>
+// Triggers a game event and call its registered callbacks.
+emit(event: string, arg1?, arg2?, arg3?, arg4?): void</code></pre>
 
       <h2><a id="plugin-api">Plugin API</a></h2>
 
       <pre><code class="language-typescript">// Loads a plugin.
 // see: https://github.com/litecanvas/game-engine/blob/main/samples/plugin-basics/plugin-basics.js
 use(callback): void
 
-// Create or update an global variable.
+// Create or update an global variable (see above WIDTH, HEIGHT, etc)
 setvar(name: string, value: any): void
 
-// Gets the color value.
+// Gets the color value given its index.
 // example: getcolor(0) returns "#111"
 getcolor(index: number): string
 
@@ -754,8 +760,8 @@ <h2><a id="tools">Useful tools</a></h2>
       </ul>
     </main>
 
-    <script src="prism/prism.js" defer></script>
-    <script src="prism/prism-typescript.js" defer></script>
-    <script src="prism/prism-autolinker.js" defer></script>
+    <script src="prism/prism.js"></script>
+    <script src="prism/prism-typescript.js"></script>
+    <script src="prism/prism-autolinker.js"></script>
   </body>
 </html>