Canvas starry sky effect, the background picture is changed to transparent (255pr. 255pm. 0), what if the stars drag very long?

problem description

one requirement is to add a picture to the background of the starry special effects. However, the drawImage method cannot set the position of the picture as backgroud does. The only thing left is to change the background of the starry sky to transparent. But this background I set to other colors is good, once set to transparent, it will be broken. Where is the reason, what to do, ask for an answer.

the environmental background of the problems and what methods you have tried

canvas

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< html >

<head>
    <meta charset="utf-8">
    <title></title>

    <style>
        html,
        body {
            height: 100%;
            max-width: 100%;
            margin: 0;
            overflow: hidden;
            font-family: sans-serif
        }
        
        -sharpspace {
            width: 100%
        }

    </style>
</head>

<body>

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

    <a href="-sharp" id="warp"></a>
    
    

    <script>
        //based on an Example by @curran
        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame
        })();
        var canvas = document.getElementById("space");
        var c = canvas.getContext("2d");

        var numStars = 1900;
        var radius = "0." + Math.floor(Math.random() * 9) + 1;
        var focalLength = canvas.width * 2;
        var warp = 0;
        var centerX, centerY;

        var stars = [],
            star;
        var i;

        var animate = true;

        initializeStars();

        function executeFrame() {

            if(animate)
                requestAnimFrame(executeFrame);
                moveStars();
                drawStars();
        }

        function initializeStars() {
            centerX = canvas.width / 2;
            centerY = canvas.height / 2;

            stars = [];
            for(i = 0; i < numStars; iPP) {
                star = {
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    z: Math.random() * canvas.width,
                    o: "0." + Math.floor(Math.random() * 99) + 1
                };
                stars.push(star);
            }
        }

        function moveStars() {
            for(i = 0; i < numStars; iPP) {
                star = stars[i];
                star.z--;

                if(star.z <= 0) {
                    star.z = canvas.width;
                }
            }
        }

        function drawStars() {
            var pixelX, pixelY, pixelRadius;

            // Resize to the screen
            if(canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                initializeStars();
            }
            if(warp == 0) {            
                c.fillStyle = "-sharpfff";   //
    //            c.fillStyle="rgba(255,255,255,0)"
                 c.fillRect(0, 0, canvas.width, canvas.height);
            }
            c.fillStyle = "rgba(0, 0, 0, " + radius + ")";
            for(i = 0; i < numStars; iPP) {
                star = stars[i];

                pixelX = (star.x - centerX) * (focalLength / star.z);
                pixelX += centerX;
                pixelY = (star.y - centerY) * (focalLength / star.z);
                pixelY += centerY;
                pixelRadius = 1 * (focalLength / star.z);

                c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);

                c.fillStyle = "rgba(0, 0, 0, " + star.o + ")";
                //c.fill();
            }
        }


        executeFrame();
    </script>

</body>

< / html >

what result do you expect? What is the error message actually seen?

I hope I can change it to a transparent background so that I can put a background picture.