JSFiddle - React, Tailwind, and code Playground

by raffaele181188

HTML

<canvas id="canvas"><canvas/>

JavaScript

function Planet(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 10;
    this.color = "red";
}
    
function Satellite(planet, distance) {
    Planet.call(this, 0, 0);
    this.planet = planet;
    this.distance = distance;
    this.angle = 0;
    this.x = planet.x + distance;
}
    
Satellite.prototype = new Planet;
    
Planet.prototype.draw = function(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

var ctx = $("#canvas")[0].getContext("2d");
earth = new Planet(40, 40);
moon = new Satellite(earth, 50);
moon.radius = 5;
moon.color = "blue";
earth.draw(ctx);
moon.draw(ctx);