HTML Canvas Activity Starter Code

AtEchoOff

Apr 15th, 2025

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

text 1.14 KB | None | 0 0

raw download clone embed print report

----------------------------index.html------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Click to Color!</title>
</head>
<body>
<h2>Click anywhere on the canvas to draw colorful dots!</h2>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
<script>
// 1. Get the canvas and its 2D drawing context
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 2. Fill the canvas with a white background
// (use fillStyle and fillRect)
// 3. Add an event listener for when the canvas is clicked
canvas.addEventListener("click", function(event) {
// 4. Get the x and y position of the mouse click
// (hint: use getBoundingClientRect and clientX/clientY)
let x = 0; // Replace this with the correct x position
let y = 0; // Replace this with the correct y position
// 5. Generate a random color
let color = ""; // Replace this with a string like "rgb(r, g, b)"
// 6. Draw a circle at the click position
// (use arc and fill)
});
</script>
</body>
</html>

Add Comment

Please, Sign In to add comment