# Assignment: Explore the Canvas API ## Learning Objectives By completing this assignment, you will demonstrate your understanding of Canvas API fundamentals and apply creative problem-solving to build visual elements using JavaScript and HTML5 canvas. ## Instructions Choose one aspect of the Canvas API that interests you and create an engaging visual project around it. This assignment encourages you to experiment with the drawing capabilities you've learned while building something uniquely yours. ### Project Ideas to Inspire You **Geometric Patterns:** - **Create** a galaxy of animated twinkling stars using random positioning - **Design** an interesting texture using repeated geometric shapes - **Build** a kaleidoscope effect with rotating, colorful patterns **Interactive Elements:** - **Develop** a drawing tool that responds to mouse movements - **Implement** shapes that change color when clicked - **Design** a simple animation loop with moving elements **Game-Related Graphics:** - **Craft** a scrolling background for a space game - **Build** particle effects like explosions or magic spells - **Create** animated sprites with multiple frames ### Development Guidelines **Research and Inspiration:** - **Browse** CodePen for creative canvas examples (for inspiration, not copying) - **Study** the [Canvas API documentation](https://developer.mozilla.org/docs/Web/API/Canvas_API) for additional methods - **Experiment** with different drawing functions, colors, and animations **Technical Requirements:** - **Use** proper canvas setup with `getContext('2d')` - **Include** meaningful comments explaining your approach - **Test** your code thoroughly to ensure it runs without errors - **Apply** modern JavaScript syntax (const/let, arrow functions) **Creative Expression:** - **Focus** on one Canvas API feature but explore it deeply - **Add** your own creative twist to make the project personal - **Consider** how your creation could be part of a larger application ### Submission Guidelines Submit your completed project as a single HTML file with embedded CSS and JavaScript, or as separate files in a folder. Include a brief comment explaining your creative choices and the Canvas API features you explored. ## Rubric | Criteria | Exemplary | Adequate | Needs Improvement | |----------|-----------|----------|-------------------| | **Technical Implementation** | Canvas API used creatively with multiple features, code runs flawlessly, modern JavaScript syntax applied | Canvas API used correctly, code runs with minor issues, basic implementation | Canvas API attempted but code has errors or doesn't execute | | **Creativity and Design** | Highly original concept with polished visual appeal, demonstrates deep exploration of chosen Canvas feature | Good use of Canvas features with some creative elements, solid visual result | Basic implementation with minimal creativity or visual appeal | | **Code Quality** | Well-organized, commented code following best practices, efficient algorithms | Clean code with some comments, follows basic coding standards | Code lacks organization, minimal comments, inefficient implementation | ## Reflection Questions After completing your project, consider these questions: 1. **What Canvas API feature did you choose and why?** 2. **What challenges did you encounter while building your project?** 3. **How could you extend this project into a larger application or game?** 4. **What other Canvas API features would you like to explore next?** > 💡 **Pro Tip**: Start simple and gradually add complexity. A well-executed simple project is better than an overly ambitious project that doesn't work properly!