JSFiddle - React, Tailwind, and code Playground

by swesh

HTML

<canvas id='canvas' width='350' height='480'></canvas>

JavaScript

var cx = document.querySelector("canvas").getContext("2d");
				// for front page
        cx.beginPath();
				
				
        	cx.moveTo(90, 10);
         cx.quadraticCurveTo(40, 25, 90, 40);
         cx.stroke();
       // left circles  
         cx.beginPath();
      cx.arc(90, 10, 3, 0, 2 * Math.PI, false);
      cx.fillStyle = 'black';
      cx.fill();
     
      cx.stroke();
      
      cx.beginPath();
      cx.arc(90, 40, 3, 0, 2 * Math.PI, false);
      cx.fillStyle = 'black';
      cx.fill();
      cx.stroke();
      
      
         
         // for center page
        cx.beginPath();
				
				
        	cx.moveTo(180, 40);
         cx.quadraticCurveTo(199, 0, 220, 40);
         cx.stroke();
         
         
         
          // center circles  
         cx.beginPath();
      cx.arc(180, 40, 5, 0, 2 * Math.PI, false);
      cx.fillStyle = 'black';
      //cx.fill();
     
      cx.stroke();
      
      cx.beginPath();
      cx.arc(220, 40, 5, 0, 2 * Math.PI, false);
      cx.fillStyle = 'black';
     // cx.fill();
      cx.stroke();
      
      
         
         //for binding at end page
         cx.beginPath();
         cx.moveTo(290, 10);
				// control=(60,10) goal=(90,90)
				
        cx.quadraticCurveTo(335, 25, 290, 40);
       cx.stroke();
       
        cx.beginPath();
      cx.arc(290, 10, 3, 0, 2 * Math.PI, false);
      cx.fillStyle = 'black';
      cx.fill();
      cx.stroke();
      
      
        cx.beginPath();
      cx.arc(290, 40, 3, 0, 2 * Math.PI, false);
      cx.fillStyle = 'black';
      cx.fill();
      cx.stroke();
				//cx.lineTo(60, 10);
				//cx.closePath();