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.
<html> <head></head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var circles = []; var arrows = []; var fill_colors = ["#ED1C24","#7FDBFF","#3D9970","#2ECC40"]; var stroke_colors = ["#FFE9ED","#C7EDFF","#A4FFE4","#4FFFA4"]; var arrow_colors = ["#9C0A0A","#0074D9","#053805","#005210"]; var circle_radius = 50; var arrow_height = 70; var arrow_width = 20; var arrow_speed_x = 5; var arrow_speed_y = 5; var arrow_distance_from_center = 100; for(var i=0;i<4;i++) {
