From ef9077a85f50d44488e25352f2b7afe31985233d Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Mon, 4 Sep 2023 17:25:55 +0800
Subject: [PATCH] Update README

---
 README.md | 125 ++++++++++++++++++++++++------------------------------
 1 file changed, 56 insertions(+), 69 deletions(-)

diff --git a/README.md b/README.md
index 76e889e..f8df2fd 100644
--- a/README.md
+++ b/README.md
@@ -6,12 +6,12 @@ Charming focus on making the _charm_ of [_character_](<https://en.wikipedia.org/
 
 If you are new to Charming, we highly recommend first reading these tutorials to introduce Charming's core concepts:
 
-- [Creating Application](#creating-application-1) - Rendering app into DOM and animate it.
-- [Setting Attributes](#setting-attributes-1) - Controlling the aesthetic appearance of the shapes.
-- [Drawing Shapes](#drawing-shapes-1) - Adding primitives, vertices, and curves to app.
-- [Applying Transformations](#applying-transformations-1) - Transforming shapes.
-- [Control Flow](#control-flow-1) - A more declarative programming style.
-- [Instance Properties](#instance-properties-1) - State of the app.
+- [Creating Application](#creating-application) - Rendering app into DOM and animate it.
+- [Setting Attributes](#setting-attributes) - Controlling the aesthetic appearance of the shapes.
+- [Drawing Shapes](#drawing-shapes) - Adding primitives, vertices, and curves to app.
+- [Applying Transformations](#applying-transformations) - Transforming shapes.
+- [Control Flow](#control-flow) - A more declarative programming style.
+- [Instance Properties](#instance-properties) - State of the app.
 
 And there are [a plenty of examples](https://github.com/charming-art/charming/tree/next) to get started with.
 
@@ -85,69 +85,56 @@ If Charming is properly installed, you should get a _lucky clove_ as below 🎉:
 
 ## API Reference
 
-### [Creating Application](#creating-application-1)
-
-Rendering app into DOM and animate it.
-
-- [cm.**app**](#cm-app)
-- [app.**render**](#app-render)
-- [app.**frame**](#app-frame)
-- [app.**start**](#app-start)
-- [app.**stop**](#app-stop)
-
-### [Setting Attributes](#setting-attributes-1)
-
-Controlling the aesthetic appearance of the shapes.
-
-- [app.**scene**](#app-scene) - Sets the specified css _color_ used for the background of the rendering context of the app and returns this app.
-- [app.**background**](#app-background) - Sets the specified color (_ch_, _fg_, _bg_) used for the background of the app in cells and returns this app.
-- [app.**stroke**](#app-stroke) - Sets the specified color (_ch_, _fg_, _bg_) for drawing the stroke of shapes and returns this app.
-- [app.**noStroke**](#app-nostroke) - Disables drawing the stroke of shapes and returns this app.
-- [app.**fill**](#app-fill) - Sets the specified color (_ch_, _fg_, _bg_) for drawing the fill of shapes and returns this app.
-- [app.**noFill**](#app-nofill) - Disables drawing the fill of shapes and returns this app.
-- [cm.**wide**](#cm-wide) - Marks the _ch_ as a wide character and returns the marked code point of it.
-
-### [Drawing Shapes](#drawing-shapes-1)
-
-Adding primitives, vertices, and curves to app.
-
-- [app.**point**](#app-point) - Draws a single cell at the specified coordinates (x, y) and returns this app.
-- [app.**line**](#app-line) - Draws a straight path from the specified coordinates (_x_, _y_) to coordinates (_x1_, _y1_) and returns this app.
-- [app.**rect**](#app-rect) - Draws a rectangle at the specified coordinates (_x_, _y_) with specified _width_ and _height_ and returns this app.
-- [app.**pixels**](#app-pixels) - Draws pixels specified by the _render_ function at the specified coordinates (_x_, _y_) and returns this app.
-
-### [Applying Transformations](#applying-transformations-1)
-
-Transforming shapes.
-
-- [app.**translate**](#app-translate)
-- [app.**scale**](#app-scale)
-- [app.**rotate**](#app-rotate)
-- [app.**popMatrix**](#app-popMatrix)
-- [app.**pushMatrix**](#app-pushMatrix)
-
-### [Control Flow](#control-flow-1)
-
-A more declarative programming style.
-
-- [app.**call**](#app-call) - Calls the specified function on this app with any optional arguments and returns this app.
-
-### [Instance Properties](#instance-properties-1)
-
-State of the app.
-
-- [app.**node**](#app-node) - Returns the canvas used to render the app.
-- [app.**cols**](#app-cols) - Returns the number of columns in the terminal.
-- [app.**rows**](#app-rows) - Returns the number of rows in the terminal.
-- [app.**width**](#app-width) - Returns the computed width of the terminal.
-- [app.**height**](#app-height) - Returns the computed height of the terminal.
-- [app.**cellWidth**](#app-cellwidth) - Returns the computed width of the cells.
-- [app.**cellHeight**](#app-cellheight) - Returns the computed height of the cells.
-- [app.**fontSize**](#app-fontsize) - Returns the font size used to render text.
-- [app.**fontFamily**](#app-fontfamily) - Returns the font family used to render text.
-- [app.**fontWeight**](#app-fontweight) - Returns the font weight used to render text.
-- [app.**frameCount**](#app-framecount) - Returns the number of frames that have been displayed since the app started.
-- [app.**frameRate**](#app-framerate) - Returns or sets the number of frames to be displayed every seconds.
+Rendering app into DOM and animate it:
+
+- [_cm_.**app**](#cm-app)
+- [_app_.**render**](#app-render)
+- [_app_.**frame**](#app-frame)
+- [_app_.**start**](#app-start)
+- [_app_.**stop**](#app-stop)
+
+Controlling the aesthetic appearance of the shapes:
+
+- [_app_.**scene**](#app-scene) - Sets the css color for the rendering context.
+- [_app_.**background**](#app-background) - Sets the color for the background.
+- [_app_.**stroke**](#app-stroke) - Sets the color for drawing the stroke of shapes.
+- [_app_.**noStroke**](#app-nostroke) - Disables drawing the stroke of shapes.
+- [_app_.**fill**](#app-fill) - Sets the color for drawing the fill of shapes.
+- [_app_.**noFill**](#app-nofill) - Disables drawing the fill of shapes.
+- [_cm_.**wide**](#cm-wide) - Marks the _ch_ as a wide character.
+
+Adding primitives, vertices, and curves to app:
+
+- [_app_.**point**](#app-point) - Draws a single cell.
+- [_app_.**line**](#app-line) - Draws a straight path.
+- [_app_.**rect**](#app-rect) - Draws a rectangle.
+- [_app_.**pixels**](#app-pixels) - Draws any shapes with canvas API.
+
+Transforming shapes:
+
+- [_app_.**translate**](#app-translate)
+- [_app_.**scale**](#app-scale)
+- [_app_.**rotate**](#app-rotate)
+- [_app_.**popMatrix**](#app-popMatrix)
+- [_app_.**pushMatrix**](#app-pushMatrix)
+
+A more declarative programming style:
+
+- [_app_.**call**](#app-call) - Facilitates method chaining.
+  State of the app:
+
+- [_app_.**node**](#app-node) - Returns the canvas used to render the app.
+- [_app_.**cols**](#app-cols) - Returns the number of columns in the terminal.
+- [_app_.**rows**](#app-rows) - Returns the number of rows in the terminal.
+- [_app_.**width**](#app-width) - Returns the computed width of the terminal.
+- [_app_.**height**](#app-height) - Returns the computed height of the terminal.
+- [_app_.**cellWidth**](#app-cellwidth) - Returns the computed width of the cells.
+- [_app_.**cellHeight**](#app-cellheight) - Returns the computed height of the cells.
+- [_app_.**fontSize**](#app-fontsize) - Returns the font size used to render text.
+- [_app_.**fontFamily**](#app-fontfamily) - Returns the font family used to render text.
+- [_app_.**fontWeight**](#app-fontweight) - Returns the font weight used to render text.
+- [_app_.**frameCount**](#app-framecount) - Returns the number of frames that have been displayed since the app started.
+- [_app_.**frameRate**](#app-framerate) - Returns or sets the number of frames to be displayed every seconds.
 
 ## Creating Application