< html > < canvas id =' myCanvas ' width =' 800 ' height =' 600 '></ canvas > < script > const endAngle = 226 ; let canvas = document . getElementById (' myCanvas '); let context = canvas . getContext ('2d'); let counter = 60 ; let radius , tx , ty ; context . translate ( tx , ty ); randomize (); requestAnimationFrame ( animate ); function animate () { let x , y ; if ( counter <= endAngle ) { let radians = Math . PI / 180 * counter ; y = radius * Math . sin ( radians ); x = radius * Math . cos ( radians ); context . fillRect ( radius / 2 - x , - y , 2 , 2 ); context . fillRect (- radius / 2 + x , - y , 2 , 2 ); } else { x = counter - endAngle - radius * 1 . 2 ; y = counter - endAngle + radius * . 71 ; context . fillRect ( x , y , 2 , 2 ); context . fillRect (- x , y , 2 , 2 ); } counter = counter + 1 ; if ( counter >= endAngle + radius * 1 . 2 ) randomize (); requestAnimationFrame ( animate ); } function randomize () { counter = 60 ; context . fillStyle = ' rgba ( 255 ,' + Math . floor ( Math . random () * 255 ) + ', 255 , 1 )'; radius = Math . random () * 100 ; context . translate (- tx , - ty ); tx = Math . random () * canvas . width ; ty = Math . random () * canvas . height ; context . translate ( tx , ty ); } </ script > </ html >

Feeling romantic today? If you're thinking "I love JavaScript!" and your idea of celebrating romance involves drawing arcs using sine and cosine functions on the HTML5 Canvas, keep reading!The symbol said to be heart-shaped (in fact it does not resemble the shape of the heart of any creature known to man) is the universal sign of love. Ever heard about the elderly lady who texted her family "Aunt Julie passed away, LOL!", because she thought LOL stands for "Lots Of Love"? We'll draw plenty of hearts to show a whole lotta love.After this longish nonsense introduction let's dive into the code!Lines [1-8] initialize the Canvas and the variables.[10] sets random parameters (color, position and size) of the first heart.[11] kicks off the main animation function [13-30]:[15-20] calculate the x and y coordinates of the next point on the arc. In this part of the drawing, the counter variable corresponds to the angle of the arc we are drawing. [19] plots one side and [20] the other, symmetrical one.We draw the arc between the angles 60 and 226 degrees. Afterwards, we change to a straight line [22-26].If the line is complete, we randomly select parameters for a new heart. The process repeats itself forever, like the circle of love - deep stuff![34] picks a random value of Red for the RGB color. The Green and Blue components are always 255 (maximum), resulting in different shades of pink/purple.[9] and [39] move the (0,0) point of the Canvas to a randomly selected place on the canvas. This allows us to greatly simplify the formulas in [19-25] - the y axis is the line of symmetry for all our hearts - it just keeps moving to a new place after each heart is drawn.[36] moves it back to the top-left corner of the Canvas. Otherwise after a couple of iterations we could end up drawing circles outside of our Canvas.Experiment with the code for a while and then celebrate with your loved one! Happy Valentines!Check out these programming tutorials: