យើងបានដឹងរួចមកហើយថា បច្ចេកវិទ្យា HTML5 បានផ្តល់លទ្ធភាពអោយយើងយ៉ាងពេញលេញ ក្នុងការបង្កើតរូបភាពទ្វេមាត្រ (2 dimensions) និងរូបភាពត្រីមាត្រ (3 dimensions) ។ ក៏ប៉ុន្តែ យើងត្រូវដឹងថា គំនូរទ្វេមាត្រ (2D) និងគំនូរត្រីមាត្រ (3D) ជាផ្នែកមួយនៃវិទ្យាសាស្ត្រកំព្យូទ័រ ដែលជាភាសាអង់គ្លេស គេហៅថា computer graphic ។ ហើយបើសិនជាយើងធ្វើការសិក្សាពីគំនូរកំព្យូទ័រនេះអោយបានដិតដល់ យើងនឹងមានសមត្ថភាពពេញលេញអាចបង្កើតគំនូរបច្ចេកទេស ខ្សែភាពយន្តគំនូរជីវចល និងឬល្បែងកំព្យូទ័រ នៅលើ browser បានយ៉ាងងាយស្រួលជាទីបំផុត។
ជាកិច្ចចាប់ផ្តើម យើងនឹងធ្វើការសិក្សាពីគំនូរទ្វេមាត្រ (2D) ដែលនឹងត្រូវគូរឡើងនៅលើធាតុ HTML មួយមានឈ្មោះថា <canvas> ដែលអនុញ្ញាតអោយយើងអាចគូរគំនូរកំព្យូទ័របានគ្រប់ប្រភេទ ទាំងគំនូរទ្វេមាត្រ (2D) ទាំងគំនូរត្រីមាត្រ (3D) ។
យ៉ាងណាម៉ិញ យើងអាចប្រៀបប្រដូចធាតុ <canvas> ទៅនឹងផ្ទាំងក្រណាត់សរបស់ជាងគំនូរទាំងឡាយដែលតែងតែគូររំលេចពណ៌នៃរូបភាពផ្សេងៗនៅលើផ្ទាំងក្រណាត់នោះ។ នៅក្នុងភាសា HTML ការបង្កើតផ្ទាំងគំនូរ canvas ត្រូវធ្វើឡើងដូចខាងក្រោមនេះ៖
ហើយដើម្បីគូររូបផ្សេងៗនៅលើផ្ទាំងគំនូរ canvas នេះ យើងត្រូវសរសេរកូដជាភាសា JS ដូចខាងក្រោម៖
