JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id="canvas">Not Supported</canvas>

CSS

canvas { display: block; }

JavaScript

var sun = new Image();  
var moon = new Image();  
var earth = new Image();  
function init(){  
  sun.src = 'http://icons.iconseeker.com/png/fullsize/function/star-48.png';  
  moon.src = 'http://icons.iconseeker.com/png/fullsize/function/star-48.png';  
  earth.src = 'http://icons.iconseeker.com/png/fullsize/function/star-48.png';  
  setInterval(draw,100);  
}  
  
function draw() {  
  var ctx = document.getElementById('canvas').getContext('2d');  
  
  ctx.globalCompositeOperation = 'destination-over';  
  ctx.clearRect(0,0,300,300); // clear canvas  
  
  ctx.fillStyle = 'rgba(0,0,0,0.4)';  
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';  
  ctx.save();  
  ctx.translate(150,150);  
  
  // Earth  
  var time = new Date();  
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );  
  ctx.translate(105,0);  
  ctx.fillRect(0,-12,50,24); // Shadow  
  ctx.drawImage(earth,-12,-12, 24, 24);  
  
  // Moon  
  ctx.save();  
  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );  
  ctx.translate(0,28.5);  
  ctx.drawImage(moon,-3.5,-3.5, 18, 18);  
  ctx.restore();  
  
  ctx.restore();  
    
  ctx.beginPath();  
  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit  
  ctx.stroke();  
   
  ctx.drawImage(sun,125,125,42,42);  
} 

init();