Untitled

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flower</title>
</head>
<body>

<canvas onmouseover="colorin()" onmouseout="colorout()" id="Flower" width="300" height="600" style="border:5px solid"></canvas>

<script>

    var flower = document.getElementById('Flower');

    var flow1 = flower.getContext('2d');
    var flow2 = flower.getContext('2d');
    var flow3 = flower.getContext('2d');
    var flow4 = flower.getContext('2d');
    var flow5 = flower.getContext('2d');
    var lin = flower.getContext('2d');

	lin.beginPath();
    lin.moveTo(150, 150);
    lin.lineTo(150, 600);
    lin.lineWidth = 15;
    lin.stroke();

    flow1.beginPath();
    flow1.arc(150, 100, 70, 0, 2 * Math.PI, false);
    flow1.fillStyle = 'green';
    flow1.fill();
    flow1.lineWidth = 3;
    flow1.strokeStyle = '#003300';
    flow1.stroke();

    flow2.beginPath();
    flow2.arc(100, 150, 70, 0, 2 * Math.PI, false);
    flow2.fillStyle = 'green';
    flow2.fill();
    flow2.lineWidth = 3;
    flow2.strokeStyle = '#003300';
    flow2.stroke();

    flow3.beginPath();
    flow3.arc(200, 150, 70, 0, 2 * Math.PI, false);
    flow3.fillStyle = 'green';
    flow3.fill();
    flow3.lineWidth = 3;
    flow3.strokeStyle = '#003300';
    flow3.stroke();

    flow4.beginPath();
    flow4.arc(150, 200, 70, 0, 2 * Math.PI, false);
    flow4.fillStyle = 'green';
    flow4.fill();
    flow4.strokeStyle = '#003300';
    flow4.stroke();

    flow5.beginPath();
    flow5.arc(150, 150, 50, 0, 2 * Math.PI, false);
    flow5.fillStyle = 'yellow';
    flow5.fill();
    flow5.lineWidth = 1;
    flow5.strokeStyle = '#003300';
    flow5.stroke();

function colorin(){

    flow5.fillStyle = 'yellow';
	flow5.fill();

}

function colorout(){

    flow5.fillStyle = 'red';
	flow5.fill();

}

	</script>

</script>
</body>

</html>