[2024Q4]: Add a new "Canvas API" module

stage1/modules/canvas-api/README.md

@@ -0,0 +1,40 @@
+# [Stage#1.](../../) Canvas API
+
+## Module Overview 📚
+
+This module gives students an overview of Canvas API. By the end of this module, students will learn how to use the `<canvas>` element to draw 2D graphic.
+
+## Learning Objectives 🎯
+
+In this module, students are expected to familiarize themselves with:
+
+- Canvas context methods
+- Drawing shapes
+- Create simple animations
+
+## Approximate Module Completion Time ⏱️
+
+- **3 hours**
+
+## Theory 📖
+
+Students are encouraged to study the following resources:
+
+- [Canvas tutorial (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) - [2 hour]
+- [Canvas tutorial (W3S)](https://www.w3schools.com/graphics/canvas_intro.asp) - [1.5 hour]
+- [HTML5 Canvas Tutorial for Complete Beginners (YT)](https://youtu.be/EO6OkltgudE) - [15 min]
+- [Drawing On HTML5 Canvas for Complete Beginners (YT)](https://youtu.be/83L6B13ixQ0) - [16.5 min]
+- [Animating HTML5 Canvas for Complete Beginners (YT)](https://youtu.be/yq2au9EfeRQ) - [32 min]
+
+## Practice 💻
+
+- Complete the test "[St1] Canvas API" in the RS-App > Auto Test.
+
+## Additional Resources 📘
+
+Expand your knowledge with these additional materials:
+
+- [Canvas context methods (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+- [Canvas API (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
+- [HTML Canvas Graphics (W3S)](https://www.w3schools.com/html/html5_canvas.asp)
+- [HTML5 Canvas Tutorials for Beginners | Become a Canvas Pro (YT)](https://www.youtube.com/playlist?list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL)