I am trying to make an Android App, I'm a baby developer I won't lie, but it's based on astrology calculations. However my canvas will load when I comment out astrology.js but breaks because of this following error. I even tried adding a time out and loading bar to hopefully slow the code down and also tried to override the memory in my MainActivity.java which in return makes my app run slower. So Idk what to do guys cause I see people making all kinds of cool apps and I finally have an idea and it can't perform a simple calculation and draw it to a canvas. Also the code works outside of AndroidStudio. Any help would be awesome.

ERROR: 2025-02-02 14:33:58.130 25503-25555 chromium com.google.android.webview E [ERROR:tile_manager(937)] WARNING: tile memory limits exceeded, some content may not draw

/**
 * Calculates planetary positions based on the date and time of birth using Keplerian mechanics.
 * @param {string} dateOfBirth - The date of birth in "YYYY-MM-DD" format.
 * @param {string} timeOfBirth - The time of birth in "HH:MM" format.
 * @returns {Array<Object>} - An array of planetary positions with names and degrees.
 */
function calculatePlanetaryPositions(dateOfBirth, timeOfBirth, callback) {
  setTimeout(() => { // Increase timeout duration for better performance
    const birthDate = new Date(`${dateOfBirth}T${timeOfBirth}`);
    const JD = (birthDate.getTime() / 86400000.0) + 2440587.5;

    const planets = {
      '☉': { a: 1.0000, e: 0.0167, i: 0.000, L: 100.464, w: 102.937, N: 0.0 },
      '☽': { a: 0.00257, e: 0.0549, i: 5.145, L: 218.32, w: 318.15, N: 125.08 },
      '♀': { a: 0.7233, e: 0.0068, i: 3.395, L: 181.98, w: 131.532, N: 76.68 },
      '♂': { a: 1.5237, e: 0.0934, i: 1.850, L: -4.568, w: -23.943, N: 49.58 },
      '♃': { a: 5.2026, e: 0.0489, i: 1.303, L: 34.404, w: 14.753, N: 100.47 },
      '♄': { a: 9.5549, e: 0.0565, i: 2.485, L: 49.944, w: 92.598, N: 113.67 },
      '♅': { a: 19.2184, e: 0.0463, i: 0.773, L: 313.232, w: 170.964, N: 74.02 },
      '♆': { a: 30.1104, e: 0.0086, i: 1.770, L: -55.126, w: 44.971, N: 131.78 }
    };

    const positions = Object.entries(planets).map(([name, p]) => {
      let M = (p.L - p.w + (JD - 2451545.0) * (360 / (365.25 * Math.sqrt(p.a**3)))) % 360;
      if (M < 0) M += 360;
      let M_rad = M * (Math.PI / 180);
      let E = M_rad;
      for (let i = 0; i < 5; i++) {
        E = M_rad + p.e * Math.sin(E);
      }
      let ν = 2 * Math.atan2(
        Math.sqrt(1 + p.e) * Math.sin(E / 2),
        Math.sqrt(1 - p.e) * Math.cos(E / 2)
      );
      let ν_deg = (ν * 180 / Math.PI + 360) % 360;
      return { name, degree: ν_deg };
    });

    callback(positions); // Return data after timeout
  }, 2500); // Increased delay to 1.5 seconds for better UI response
}

// Add a loading bar to the bottom of the page
const loadingBar = document.createElement('div');
loadingBar.style.position = 'fixed';
loadingBar.style.bottom = '0';
loadingBar.style.left = '0';
loadingBar.style.width = '0%';
loadingBar.style.height = '5px';
loadingBar.style.backgroundColor = 'green';
document.body.appendChild(loadingBar);

function updateLoadingBar(progress) {
  loadingBar.style.width = `${progress}%`;
}

/**
 * Draws an astrological chart with 6 intersecting lines and zodiac symbols.
 * @param {CanvasRenderingContext2D} ctx - The 2D context of the canvas.
 * @param {HTMLCanvasElement} canvas - The canvas element.
 * @param {Array<Object>} positions - The planetary positions.
 */
function drawAstrologicalChart(ctx, canvas, positions) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  updateLoadingBar(50); // Update loading bar midway

  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = Math.min(canvas.width, canvas.height) / 2 - 10;

  // Zodiac signs in order
  const zodiacSigns = ['♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐', '♑', '♒', '♓'];

  // Draw outer circle
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 2;
  ctx.stroke();
  updateLoadingBar(75); // Update loading bar further

  // Draw zodiac signs and planetary positions
  positions.forEach((planet, i) => {
    const angle = (i * Math.PI) / 6;
    const x = centerX + radius * Math.cos(angle);
    const y = centerY + radius * Math.sin(angle);
    ctx.fillStyle = '#f4d03f';
    ctx.font = '20px Arial';
    ctx.fillText(zodiacSigns[i], x, y);
  });

  updateLoadingBar(100); // Finish loading
  setTimeout(() => loadingBar.style.width = '0%', 1000); // Hide bar after completion
}

// Export the functions
export { calculatePlanetaryPositions, drawAstrologicalChart };

I tried overriding the memory, I've tried modifying manifests.xml, and all of these overrides and exceptions in my mainactivity

package com.example.astrodate;

import android.content.pm.ActivityInfo;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.ConsoleMessage;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); //  Lock in portrait mode

        webView = new WebView(this);
        setContentView(webView);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);  //  Enable JavaScript for all files
        webSettings.setDomStorageEnabled(true);  //  Enable local storage
        webSettings.setAllowFileAccess(true);  //  Allow access to local files
        webSettings.setAllowContentAccess(true);

        //  Allow mixed content (fix CORS issues if loading external resources)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

        //  Force software rendering for WebView (fixes canvas issues)
        webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                Log.d("WebView", " Page loaded successfully: " + url);
                webView.loadUrl("javascript:console.log(' JavaScript is running inside WebView!')");
            }
        });

        //  Capture JavaScript console logs for debugging
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
                Log.d("WebView", "JS Log: " + consoleMessage.message());
                return true;
            }
        });

        if (savedInstanceState != null) {
            webView.restoreState(savedInstanceState); //  Restore WebView state on rotate
        } else {
            Log.d("WebView", " Loading index.html...");
            webView.loadUrl("file:///android_asset/index.html"); //  Load index.html from assets
        }
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        webView.saveState(outState); //  Save WebView state before rotation
    }

    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack(); //  Navigate back instead of exiting the app
        } else {
            super.onBackPressed(); // Exit the app if there's no history
        }
    }
}