JSFiddle - React, Tailwind, and code Playground

by Abhishek Kumar

JavaScript

<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");
// Get the canvas context
var ctx = canvas.getContext("2d");
// Set the font and text alignment
ctx.font = "20px Arial";
ctx.textAlign = "center";
// Define the colors for each planet
var colors = {
  Sun: "gold",
  Moon: "silver",
  Mars: "red",
  Mercury: "green",
  Jupiter: "orange",
  Venus: "pink",
  Saturn: "brown",
  Rahu: "purple",
  Ketu: "gray"
};
// Define the positions for each planet in the zodiac
var positions = {
  Sun: 3, // Aries
  Moon: 5, // Gemini
  Mars: 9, // Sagittarius
  Mercury: 4, // Taurus
  Jupiter: 7, // Leo
  Venus: 6, // Cancer
  Saturn: 10, // Capricorn
  Rahu: 11, // Aquarius
  Ketu: 5 // Gemini
};
// Define the names for each zodiac sign
var signs = [
  "Aries",
  "Taurus",
  "Gemini",
  "Cancer",
  "Leo",
  "Virgo",
  "Libra",
  "Scorpio",
  "Sagittarius",
  "Capricorn",
  "Aquarius",
  "Pisces"
];
// Draw the rectangle for the birth chart
ctx.strokeRect(50,50,400,400);
// Draw the horizontal and vertical lines to divide the rectangle into twelve parts
ctx.beginPath();
ctx.moveTo(250,50);
ctx.lineTo(250,450);
ctx.moveTo(50,250);
ctx.lineTo(450,250);
ctx.stroke();
// Draw the diagonal lines to divide each part into two parts
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.moveTo(250,50);
ctx.lineTo(450,250);
ctx.moveTo(450,50);
ctx.lineTo(250,250);
ctx.moveTo(450,250);
ctx.lineTo(250,450);
ctx.moveTo(450,450);
ctx.lineTo(250,250);
ctx.moveTo(250,450);
ctx.lineTo(50,250);
ctx.moveTo(50,450);
ctx.lineTo(250,250);
ctx.moveTo(50,250);
ctx.lineTo(250,50);
ctx.stroke();
// Loop through each planet and draw its name and color in its position
for (var planet in positions) {
  // Get the position of the planet in the zodiac (1 to 12)
  var pos = positions[planet];
  // Calculate the x and y coordinates of the center of the part where the planet is located
  var x = (pos - 1)...