Drawing with code can be a fun and rewarding experience, especially when you see your creations come to life on the screen. In this section, we’ll explore how to draw a simple stick figure using JavaScript and the HTML5 Canvas. This exercise will help you understand how to use basic shapes and lines to create a recognizable figure, and you’ll have the opportunity to customize your stick figure with unique features.
Key Learning Objectives
- Apply drawing techniques to create a simple figure.
- Combine shapes and lines to represent objects.
- Practice planning and executing a drawing.
Getting Started with Canvas
Before we dive into drawing our stick figure, let’s ensure we have our canvas set up correctly. The HTML5 Canvas is a powerful tool for drawing graphics using JavaScript. Here’s a basic setup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stick Figure Drawing</title>
</head>
<body>
<canvas id="stickFigureCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
<script src="stickFigure.js"></script>
</body>
</html>
In your stickFigure.js file, you will write the JavaScript code to draw the stick figure.
Step 1: Drawing the Head
The head of the stick figure will be represented by a simple circle. We use the arc() method to draw a circle on the canvas.
const canvas = document.getElementById('stickFigureCanvas');
const ctx = canvas.getContext('2d');
// Draw the head
ctx.beginPath();
ctx.arc(200, 100, 20, 0, 2 * Math.PI);
ctx.stroke();
Step 2: Drawing the Body
The body of the stick figure is a straight line extending downward from the head.
// Draw the body
ctx.moveTo(200, 120);
ctx.lineTo(200, 180);
ctx.stroke();
Step 3: Drawing the Arms
The arms are represented by two lines extending from the body. You can adjust the angles to change the pose.
// Draw the arms
ctx.moveTo(200, 140);
ctx.lineTo(170, 160);
ctx.moveTo(200, 140);
ctx.lineTo(230, 160);
ctx.stroke();
Step 4: Drawing the Legs
Finally, the legs are drawn as two lines extending from the bottom of the body.
// Draw the legs
ctx.moveTo(200, 180);
ctx.lineTo(180, 220);
ctx.moveTo(200, 180);
ctx.lineTo(220, 220);
ctx.stroke();
Now that you have the basic stick figure, it’s time to get creative! Here are a few ideas:
- Add a Hat: Draw a rectangle or triangle on top of the head to represent a hat.
- Change the Pose: Adjust the angles of the arms and legs to create different poses.
- Accessories: Add a scarf, glasses, or even a small pet next to your stick figure.
Here’s an example of adding a hat:
// Draw a hat
ctx.beginPath();
ctx.moveTo(180, 80);
ctx.lineTo(220, 80);
ctx.lineTo(200, 60);
ctx.closePath();
ctx.stroke();
Activity: Challenge Yourself
- Create Different Poses: Experiment with different arm and leg positions to make your stick figure look like it’s running, jumping, or dancing.
- Add Details: Use additional shapes and lines to add details like facial features or clothing.
- Draw a Scene: Place your stick figure in a simple scene, such as a park or a beach.
Best Practices and Tips
- Plan Your Drawing: Before you start coding, sketch your stick figure on paper to plan the positions of each part.
- Use Comments: Add comments to your code to explain each step, making it easier to understand and modify later.
- Experiment: Don’t be afraid to try new things and see how they affect your drawing.
Common Pitfalls
- Incorrect Coordinates: Ensure that your coordinates are correct and consistent, especially when drawing connected lines.
- Overlapping Lines: Be mindful of the order in which you draw lines to avoid unwanted overlaps.
Optimization Tips
- Reuse Code: Create functions for repetitive tasks, such as drawing arms or legs, to make your code cleaner and more efficient.
- Adjust Canvas Size: Make sure your canvas size is appropriate for your drawing to avoid clipping.
Conclusion
Drawing a stick figure with JavaScript is a great way to practice using the canvas and learn about basic drawing techniques. As you become more comfortable with these concepts, you’ll be able to create more complex drawings and animations. Remember to have fun and let your creativity shine!
Quiz Time!
### What method is used to draw a circle on the canvas?
- [x] `arc()`
- [ ] `circle()`
- [ ] `ellipse()`
- [ ] `round()`
> **Explanation:** The `arc()` method is used to draw circles and arcs on the canvas.
### Which method is used to start a new path for drawing?
- [x] `beginPath()`
- [ ] `startPath()`
- [ ] `newPath()`
- [ ] `initPath()`
> **Explanation:** The `beginPath()` method is used to start a new path for drawing on the canvas.
### How do you draw a straight line from one point to another?
- [x] `moveTo()` and `lineTo()`
- [ ] `drawLine()`
- [ ] `straightLine()`
- [ ] `connect()`
> **Explanation:** The `moveTo()` method sets the starting point, and `lineTo()` draws a line to the specified endpoint.
### What is the purpose of the `stroke()` method?
- [x] To render the outline of shapes and paths
- [ ] To fill shapes with color
- [ ] To erase parts of the canvas
- [ ] To create gradients
> **Explanation:** The `stroke()` method is used to render the outline of shapes and paths on the canvas.
### Which of the following can be added to customize a stick figure?
- [x] Hat
- [x] Glasses
- [ ] Background music
- [ ] Video
> **Explanation:** You can add visual elements like hats and glasses to customize a stick figure, but not audio or video.
### What should you do before starting to code your drawing?
- [x] Plan your drawing with a sketch
- [ ] Write all the code without testing
- [ ] Ignore the canvas size
- [ ] Use random coordinates
> **Explanation:** Planning your drawing with a sketch helps you visualize the final result and organize your code.
### How can you avoid overlapping lines in your drawing?
- [x] Draw lines in the correct order
- [ ] Use random colors
- [ ] Increase the canvas size
- [ ] Decrease the canvas size
> **Explanation:** Drawing lines in the correct order helps prevent unwanted overlaps.
### What is a common pitfall when drawing with canvas?
- [x] Incorrect coordinates
- [ ] Using too many colors
- [ ] Drawing too many shapes
- [ ] Using comments
> **Explanation:** Incorrect coordinates can lead to misplaced or misaligned shapes.
### What is the benefit of creating functions for repetitive tasks?
- [x] Cleaner and more efficient code
- [ ] Slower execution
- [ ] More complex code
- [ ] Less readable code
> **Explanation:** Functions help organize code, making it cleaner and more efficient by reducing repetition.
### True or False: The `fill()` method is used to draw outlines of shapes.
- [ ] True
- [x] False
> **Explanation:** The `fill()` method is used to fill shapes with color, while `stroke()` is used for outlines.