4.1 KiB
Assignment: Explore di Canvas API
Learning Objectives
By finishing dis assignment, you go show say you sabi Canvas API basics and fit use creative problem-solving build visual tins wit JavaScript and HTML5 canvas.
Instructions
Choose one part of di Canvas API wey dey interest you come create one better visual project around am. Dis assignment dey encourage you to try di drawing skills wey you don learn as you build sometin wey be your own.
Project Ideas to Inspire You
Geometric Patterns:
- Create galaxy of animated twinkling stars wey dey position randomly
- Design interesting texture with repeated geometric shapes
- Build kaleidoscope effect with patterns wey dey rotate and get plenty colour
Interactive Elements:
- Develop drawing tool wey dey respond to mouse movements
- Implement shapes wey go change colour when you click am
- Design simple animation loop wit moving elements
Game-Related Graphics:
- Craft scrolling background for space game
- Build particle effects like explosions or magic spells
- Create animated sprites with many frames
Development Guidelines
Research and Inspiration:
- Browse CodePen for creative canvas examples (to inspire you, no to copy)
- Study di Canvas API documentation for more methods
- Experiment with different drawing functions, colours, and animations
Technical Requirements:
- Use correct canvas setup wit
getContext('2d') - Include meaningful comments to explain how you take do am
- Test your code proper so e no go get error
- Apply modern JavaScript syntax (const/let, arrow functions)
Creative Expression:
- Focus on one Canvas API feature but explore am well well
- Add your own creative touch to make di project personal
- Consider how your project fit join bigger app
Submission Guidelines
Send your finished project as one HTML file wey get embedded CSS and JavaScript, or as different files inside one folder. Add small comment wey explain your creative choices and di Canvas API features wey you try.
Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
|---|---|---|---|
| Technical Implementation | Canvas API used creatively with many features, code run perfect, modern JavaScript syntax dey apply | Canvas API used correct, code dey run but get small issues, basic implementation | Canvas API try but code get errors or e no run |
| Creativity and Design | Very original idea with fine visual, show say you explore di Canvas feature well well | Good use of Canvas features with some creative tins, visual solid | Basic implementation, little creativity or visual appeal |
| Code Quality | Code well arranged, comments dey follow best practices, efficient algorithms | Clean code with some comments, follow basic coding rules | Code no dey organized, few comments, inefficient implementation |
Reflection Questions
After you finish your project, think about these questions:
- Which Canvas API feature you choose and why?
- Which challenges you face as you dey build your project?
- How you fit extend dis project to become bigger app or game?
- Which other Canvas API features you go like explore next?
💡 Pro Tip: Start with simple tori come add complexity small by small. Simple project wey you do well better pass big project wey no work well!
Wetin I wan talk:
Dis document na wetin AI translation service Co-op Translator translate. Even though we try make e correct, abeg sabi say automated translation fit get mistake or no too correct well. The original document wey e dey for im own language na im be the correct one. If na serious matter, better make pipo wey sabi translate am well well do am. We no go responsible if anybody misunderstand or mix up tins because of dis translation.