Untitled



<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Intro to Functions 1</title>
</head>
<canvas id="myCanvas" width="640" height="480" style="border: 1px solid black";></canvas>

<body>

<script>

var canvas = document.getElementById("myCanvas");
var drawingTools = canvas.getContext("2d");

// Draw sky.
drawingTools.fillStyle = "lightBlue";
drawingTools.fillRect(0, 0, 640, 300);

// Draw grass.
drawingTools.fillStyle = "green";
drawingTools.fillRect(0, 300, 640, 180);

// Function calls to draw flowers.
flower(220, 270, "rgb(255, 0, 0)");
flower(270, 270, "rgb(0, 255, 0)");
flower(320, 270, "rgb(0, 0, 255)");
flower(370, 270, "pink");
flower(420, 270, "#ff3399");


function flower(xPos, yPos, colour)
{
	// Draw the stem.
	drawingTools.strokeStyle = "darkGreen";
	drawingTools.lineWidth = 3;
	drawingTools.beginPath();
	drawingTools.moveTo(xPos, yPos);
	drawingTools.lineTo(xPos, yPos+50);
	drawingTools.stroke();

	// Draw petal in specified colour.
	drawingTools.fillStyle = colour;
	drawingTools.beginPath();
	drawingTools.arc(xPos, yPos, 15, 0, 2*Math.PI);
	drawingTools.fill();

	// Draw yellow stamen.
	drawingTools.fillStyle = "#FFFF71";
	drawingTools.beginPath();
	drawingTools.arc(xPos, yPos, 10, 0, 2*Math.PI);
	drawingTools.fill();
}


</script>

</body>
</html>