JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=id width=500 height=500></canvas> <br/><Br/>

<div id="push" style="width:200px;height:25px;">Launch my Ship!</div> <br/><br/>

<div id="time_taken" style="width:550px;"></div>

CSS

body{
background-color:black;
}
#id{
    width:500px;
    height:500px;
    border:1px solid white;
}
#push{
border:1px solid white;
    color:white;
}
#time_taken{
border:1px solid white;
    color:white;
}

JavaScript

var spaceship = {};
        spaceship.defaultRotationSpeed = 0.59;
        spaceship.rotationSpeed = 0;
	var planets = [];
		planets[0] = {},
		planets[0].radius = 86;
		planets[0].rotationSpeed = 0.39;
        planets[0].color = 'green';
		planets[1] = {},
		planets[1].radius = 220;
		planets[1].rotationSpeed = 0.15;	
        planets[1].color = 'blue';

    var canvas = document.getElementById('id');
    var launch = document.getElementById('push')
        launch.addEventListener('click',launchShip,false);
    var ctx = canvas.getContext('2d');
    var sunX = canvas.width/2;
    var sunY = canvas.height/2;
    var time = Date.now();
    var dt = 0;

    function update_obj(i){
        i.currentAngle = (i.currentAngle % 6.283 || 0) + dt/1000 * i.rotationSpeed;
        i.x = sunX + i.radius * Math.cos(i.currentAngle);
        i.y = sunY + i.radius * Math.sin(i.currentAngle);
    }

    function anim(){
        ctx.clearRect ( 0 , 0 , canvas.width , canvas.height );	
        dt = Date.now()-time;
        time += dt;
        //draw all planets
        for(var i in planets){		
            update_obj(planets[i]);
                                        
            ctx.fillStyle=planets[i].color;
            ctx.fillRect(planets[i].x - 7.5,planets[i].y-7.5,15,15);
        } 
            
        //draw sun
        ctx.fillStyle='yellow';
        ctx.fillRect(sunX-25, sunY-25 ,50,50);           
        //draw ship
        if(spaceship.target){
        if((spaceship.target.radius < spaceship.startRadius && spaceship.radius > spaceship.target.radius) ||
           (spaceship.target.radius > spaceship.startRadius && spaceship.radius < spaceship.target.radius)){	           

             spaceship.radius += dt * (spaceship.outwardRate / 1000);
            
             update_obj(spaceship);           
        
            ctx.fillStyle='white';
            ctx.fillRect(spaceship.x,spaceship.y,3,3);              
            
        } else {
            spaceship.target...