html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Lovely Spring Scene</h1>
<p>Have a Nice Time Seeing My Spring Scene!</p>
<div id="flowerContainer"></div> <!-- Correct ID -->
<script src = "script.js"></script>
</body>
</html>
css
css
1
2
3
4
body
{
}
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = () => { // Create a canvas element
const canvas = document.createElement('canvas'); // Create a new canvas element
canvas.width = 800;
canvas.height = 700;
canvas.style.border = '3px double black'; // Optional: add a border for visibility
document.getElementById('flowerContainer').appendChild(canvas); // Append to the correct container
// Get the 2D drawing context
const ctx = canvas.getContext('2d');
// Draw a simple flower using circles and lines
function drawFlower(x, y, petalSize) {
const originalPetalSize = petalSize; // Keep the original petal size for stalk and leaves
// Scale down the flower petals and center only
petalSize = petalSize * 0.5; // Reduce the size of the petals and center to 50%
// Draw stalk (use the original petal size for proportionate stalk)
ctx.beginPath();
ctx.moveTo(x, y + originalPetalSize * 0.7);
ctx.bezierCurveTo(
x - originalPetalSize * 0.4,
y + originalPetalSize * 2,
x + originalPetalSize * 0.4,
y + originalPetalSize * 3,
x,
y + originalPetalSize * 4
);
BROWSER
Console
Run