You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
4.1 KiB
74 lines
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](https://developer.mozilla.org/docs/Web/API/Canvas_API) 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:
|
|
|
|
1. **Which Canvas API feature you choose and why?**
|
|
2. **Which challenges you face as you dey build your project?**
|
|
3. **How you fit extend dis project to become bigger app or game?**
|
|
4. **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!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Wetin I wan talk**:
|
|
Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/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.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |