Update README

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,57 @@ 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) - Creates a charming app with specified options asynchronously.
+- [_app_.**render**](#app-render) - Renders the app, rasterizing vector graphics into cells.
+- [_app_.**frame**](#app-frame) - Adds a frame hook, updating shapes and states of app.
+- [_app_.**start**](#app-start) - Starts the app, invoking the frame callbacks on every delay milliseconds.
+- [_app_.**stop**](#app-stop) - Stops the app, preventing subsequent frame callbacks.
+
+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 a character as a wide character.
+
+Adding primitives, vertices, and curves to app:
+
+- [_app_.**point**](#app-point) - Draws a single cell with specified position and styles.
+- [_app_.**line**](#app-line) - Draws a straight path with specified position and styles.
+- [_app_.**rect**](#app-rect) - Draws a rectangle with specified position and styles.
+- [_app_.**pixels**](#app-pixels) - Draws any shapes with canvas APIs with specified position.
+
+Applying transformations to shapes:
+
+- [_app_.**translate**](#app-translate) - Moves shapes by the specified distances.
+- [_app_.**scale**](#app-scale) - Increases or decreases the size of shapes by the specified ratios.
+- [_app_.**rotate**](#app-rotate) - Rotates shapes by the specified angle.
+- [_app_.**popMatrix**](#app-popMatrix) - Saves the current transformations.
+- [_app_.**pushMatrix**](#app-pushMatrix) - Restore the current transformations.
+
+A more declarative programming style:
+
+- [_app_.**call**](#app-call) - Calls a function on app with optional arguments.
+
+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