JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="my_canvas" width=1000 height=1000></canvas>

JavaScript

function initCanvas(){

    var ctx = document.getElementById('my_canvas').getContext('2d');
    var cW = ctx.canvas.width, cH = ctx.canvas.height;
    var rectW = 40;
    var rectH = 0;
    var rectX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5); 
    var rectY = (ctx.canvas.height * .5) - (rectH * .5);


    var Starsystem = {
        Neptune: {
            x: 180, 
            y: 300,
            render: function(){
            	  
                Starsystem.Neptune.x = Starsystem.Neptune.x + 0;
                Starsystem.Neptune.y = Starsystem.Neptune.y - 0;
                ctx.fillStyle = "rgb(65,105,225)";  
                
                ctx.beginPath();
               
                ctx.arc( Starsystem.Neptune.x , Starsystem.Neptune.y, 10, 0, Math.PI*2, true); 
                ctx.closePath();
                ctx.fill();
            }
        }, Sun: {
        render: function(){
        ctx.fillStyle = "rgb(255,255,51)";  
        ctx.save();
        ctx.shadowColor = 'yellow';
        ctx.shadowBlur = 50;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;    
        ctx.beginPath();
        ctx.arc(rectX, rectY, rectW, rectH, Math.PI*2, true); //alligns the sun in center
        ctx.closePath();
        ctx.fill();
        ctx.restore();
  
        //Still applied to all 
            }
        }
    }
   
   //initCanvas();
   Starsystem.Sun.render();
   Starsystem.Neptune.render();
 }  
 initCanvas();