JSFiddle - React, Tailwind, and code Playground

by Vloxxity

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
    <title>Rotating Fish</title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="400"></canvas>

    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        const fishes = [];

        function Fish(x, y, radius, dx, dy) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.dx = dx;
            this.dy = dy;

            this.draw = function () {
                ctx.save(); // Save the current state
                ctx.translate(this.x, this.y); // Move the canvas origin to the fish position
                const angle = Math.atan2(this.dy, this.dx); // Calculate the angle of rotation
                ctx.rotate(angle); // Rotate the canvas
                ctx.beginPath();
                
                // Draw fish body
                ctx.moveTo(0, 0);
                ctx.quadraticCurveTo(this.radius, -this.radius, this.radius * 2, 0);
                ctx.quadraticCurveTo(this.radius, this.radius, 0, 0);
                ctx.fillStyle = "blue";
                ctx.fill();

                // Draw fish tail
                ctx.moveTo(this.radius * 2, 0);
                ctx.lineTo(this.radius * 3, -this.radius);
                ctx.lineTo(this.radius * 3, this.radius);
                ctx.lineTo(this.radius * 2, 0);
                ctx.fillStyle = "orange";
                ctx.fill();

                ctx.closePath();
                ctx.restore(); // Restore the saved state
            };

            this.update = function () {
                this.x += this.dx;
                this.y += this.dy;

                // Bounce off the walls
                if (this.x - this.radius < 0 || this.x + this.radius * 3 >...