need to fix that mouse dragging by only when clicking and dragging, but no always rotating with mouse move on canvas.  it suppose to store the current (rotated) position, and on the next mouse left click and drag it should update the position and so on… it still resets the position after reclicking and redragging.: const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

const sunPos = { x: 0, y: 0, z: 0, size: 20 };
const mercuryPos = { x: 50, y: 0, z: 0, size: 3 };
const venusPos = { x: 70, y: 0, z: -10, size: 4 };
const earthPos = { x: 100, y: 0, z: 0, size: 5 };

let rotation = { x: 0, y: 0, z: 0 };

function drawSolarSystem() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
function drawGrid() {
const gridSize = 100;
const gridSpacing = 10;

// Find the normal vector of the orbital plane by taking the cross-product of the positions
// of two planets that are not collinear with the Sun (in this case, Mercury and Earth)
const v1 = { x: earthPos.x - sunPos.x, y: earthPos.y - sunPos.y, z: earthPos.z - sunPos.z };
const v2 = { x: mercuryPos.x - sunPos.x, y: mercuryPos.y - sunPos.y, z: mercuryPos.z - sunPos.z };
const normal = {
x: v1.y * v2.z - v1.z * v2.y,
y: v1.z * v2.x - v1.x * v2.z,
z: v1.x * v2.y - v1.y * v2.x
};

// Normalize the normal vector to get the direction of the orbital plane
const length = Math.sqrt(normal.x * normal.x + normal.y * normal.y + normal.z * normal.z);
const planeDir = { x: normal.x / length, y: normal.y / length, z: normal.z / length };

// Calculate a point on the plane by projecting the Sun position onto it
const planePos = {
x: sunPos.x - (sunPos.x * planeDir.x + sunPos.y * planeDir.y + sunPos.z * planeDir.z) * planeDir.x,
y: sunPos.y - (sunPos.x * planeDir.x + sunPos.y * planeDir.y + sunPos.z * planeDir.z) * planeDir.y,
z: sunPos.z - (sunPos.x * planeDir.x + sunPos.y * planeDir.y + sunPos.z * planeDir.z) * planeDir.z
};

// Draw grid lines that lie on the orbital plane
ctx.beginPath();
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
for (let i = -gridSize; i <= gridSize; i += gridSpacing) {
const p1 = {
x: planePos.x + (i * planeDir.x),
y: planePos.y + (i * planeDir.y),
z: planePos.z + (i * planeDir.z)
};
const p2 = {
x: planePos.x + (i * planeDir.x) + (gridSize * planeDir.y),
y: planePos.y + (i * planeDir.y) - (gridSize * planeDir.x),
z: planePos.z + (i * planeDir.z)
};
ctx.moveTo(projectTo2D(p1.x, p1.y, p1.z).x, projectTo2D(p1.x, p1.y, p1.z).y);
ctx.lineTo(projectTo2D(p2.x, p2.y, p2.z).x, projectTo2D(p2.x, p2.y, p2.z).y);
}
ctx.stroke();
ctx.closePath();
}
drawGrid();

// Draw Milky Way background
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "lighter";
for (let i = 0; i < 1000; i++) {
const size = Math.random() * 2;
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, ' + 0.1 + ')';
ctx.fill();
}

// Draw the Sun
const sunPos2D = projectTo2D(sunPos.x, sunPos.y, sunPos.z);
drawPlanet(sunPos2D.x, sunPos2D.y, sunPos.size, '#ffcc00');

// Draw Mercury
const mercPos2D = projectTo2D(mercuryPos.x - sunPos.x, mercuryPos.y - sunPos.y, mercuryPos.z - sunPos.z);
drawPlanet(mercPos2D.x, mercPos2D.y, mercuryPos.size, '#ff6666');

// Draw Venus
const venusPos2D = projectTo2D(venusPos.x - sunPos.x, venusPos.y - sunPos.y, venusPos.z - sunPos.z);
drawPlanet(venusPos2D.x, venusPos2D.y, venusPos.size, '#ffa500');

// Draw Earth
const earthPos2D = projectTo2D(earthPos.x - sunPos.x, earthPos.y - sunPos.y, earthPos.z - sunPos.z);
drawPlanet(earthPos2D.x, earthPos2D.y, earthPos.size, '#6699ff');

// Update planet positions for the next frame
updatePlanetPositions();

// Update rotation angles based on mouse position
let isDragging = false;
let lastRotation = { x: 0, y: 0 }; // store last rotation angles

canvas.addEventListener('mousedown', function(event) {
isDragging = true;
});
canvas.addEventListener('mouseup', function(event) {
isDragging = false;
// store current rotation angle values when mouse button is released
lastRotation.x = rotation.x;
lastRotation.y = rotation.y;
});
canvas.addEventListener('mousemove', function(event) {
if (isDragging) {
// add current and last rotation angle values to get new angles
rotation.x = lastRotation.x + (event.clientY - canvas.height/2) / canvas.height * Math.PI;
rotation.y = lastRotation.y + (event.clientX - canvas.width/2) / canvas.width * Math.PI;
}
});
}

function updatePlanetPositions() {
// Update Mercury's position
mercuryPos.x = 50 * Math.cos(Date.now() / 1000);
mercuryPos.z = 50 * Math.sin(Date.now() / 1000);

// Update Venus's position
venusPos.x = 70 * Math.cos(Date.now() / 1500);
venusPos.z = -10 * Math.sin(Date.now() / 1500);

// Update Earth's position
earthPos.x = 100 * Math.cos(Date.now() / 2000);
earthPos.z = 100 * Math.sin(Date.now() / 2000);
}

function drawPlanet(x, y, size, color) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}

function projectTo2D(x, y, z) {
const fov = 90; // Field of view angle in degrees
const distance = canvas.width / 2 / Math.tan(fov / 2 * Math.PI / 180);

const cosX = Math.cos(rotation.x);
const sinX = Math.sin(rotation.x);
const cosY = Math.cos(rotation.y);
const sinY = Math.sin(rotation.y);
const cosZ = Math.cos(rotation.z);
const sinZ = Math.sin(rotation.z);

const x1 = x * cosY * cosZ - y * cosY * sinZ + z * sinY;
const y1 = x * (sinX * sinY * cosZ + cosX * sinZ) + y * (sinX * sinY * sinZ - cosX * cosZ) - z * sinX * cosY;
const z1 = x * (cosX * sinY * cosZ - sinX * sinZ) + y * (cosX * sinY * sinZ + sinX * cosZ) + z * cosX * cosY;

const scale = distance / (distance + z1);
const x2d = canvas.width / 2 + x1 * scale;
const y2d = canvas.height / 2 - y1 * scale;

return { x: x2d, y: y2d };
}
// Start the animation loop
setInterval(drawSolarSystem, 16);