Create a Simple Application using HTML5 Canvas Element. Draw 4 circles to the left side of the canvas & fill them with different colors. Draw arrows corresponding to each circle to the right side of the canvas. All the circles & the arrows should be drawn on a single canvas element. When you click inside any circle, the arrow to the corresponding circle should start moving towards the circle & hit it. Color of the circle should change once the arrow hits them. Add a reset button that resets the application to its initial state.

<canvas id="myCanvas" width="800" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//circle 1
var x = 90;
var y = 70;
var radius = 50;
var startAngle = 0;
var endAngle = 2*Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x,y,radius,startAngle,endAngle,counterClockwise);
context.fillStyle = "#00FFFF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

//circle 2
var x = 90;
var y = 160;
var