tutorial/introduction/start-drawing.md

+# Understand ascii array
+
+The `ascii` environment variable allows you to get access to printed characters.
+It is a simple 2D array accessible like this `ascii[y][x]`.
+
+Here is an example which draws a '#' character on the screen at the mouse
+coordinates:
+
+```javascript
+function	setup() {
+	/// Create the canvas of 30 x 20
+	create_canvas(30, 20);
+}
+
+function	draw() {
+	/// Clear the canvas background with the '.' character
+	background('.');
+	/// Put '#' to mouse coordinates
+	ascii[mouse_y][mouse_x] = '#';
+}
+```
+
+# Moving line
+
+The following example draws a vertical line which moves indefinitely from left
+to right:
+
+```javascript
+/// Create x
+let	x;
+
+function	setup() {
+	/// Create the canvas of 30 x 20
+	create_canvas(30, 20);
+	/// Initialize x
+	x = 0;
+}
+
+function	draw() {
+	/// Clear the canvas (remove previous drawn stuff)
+	clear();
+	/// Draw a vertical line at x
+	line(x, 0, x, canvas_height - 1);
+	/// Increment x (go to right)
+	x += 1;
+	/// Check canvas width limit
+	if (x >= canvas_width) {
+		/// Restart at 0
+		x = 0;
+	}
+}
+```
+
+Here's another example which allows the user to draw with the mouse.
+
+```javascript
+function	setup() {
+	/// Create the canvas of 30 x 20
+	create_canvas(30, 20);
+}
+
+function	draw() {
+	/// Put a '#' character at mouse position
+	ascii[mouse_y][mouse_x] = '#';
+}
+```
+
+The `ascii` environment variable is an array which gives you access to the
+canvas characters. You access it with a `y` index (line) and with a `x` index
+(column).
+
+`mouse_x` and `mouse_y` are other environment variables which give you the mouse
+coordinates.
+