JSFiddle - React, Tailwind, and code Playground

by edgarinvillegas

HTML

<script>
    
</script>

<body onLoad='make()'>
    <h1>stars</h1>
    <canvas id='c'>
    </canvas>
  </body>

CSS

#c {
           background-color:#000000;
           width:450px;
           height:450px;
       }

JavaScript

var star = {}
      function the_stars() {}
      the_stars.prototype = {
        constellation: "test",
        x: 120,
        y: 120
      };
      
      the_stars.prototype.set = function(c,xx,yy) { 
          //alert("called"); 
          this.constellation=c; this.x=xx; this.y=yy; 
      };
      star["Polaris"] = new the_stars();
      star["Polaris"].set("Ursa Minor",250,20);
      alert(star["Polaris"].constellation);
      star["Mizar"] = new the_stars();
      star["Mizar"].set("Ursa Major",50,75);
      star["Alderbaran"] = new the_stars();
      star["Alderbaran"].set("Taurus",300,150);
      star["Rigel"] = new the_stars();
      star["Rigel"].set("Orion",350,370);
      function make()
      {
         alert("in make");
         var context = document.getElementById('c').getContext('2d');
         context.fillStyle = 'white';
         context.strokeStyle = 'white';
         for(var key in star)
         {
            var thestar = star[key];
            alert("in for loop "+thestar+thestar.x+thestar.y);
            context.arc(thestar.x,thestar.y,40,0,2*Math.PI);
            context.stroke();
         }
      }