HTML5 Game - Use two canvas, one for background

Description

Use two canvas, one for background
Demo

<!DOCTYPE HTML>
<html>
<head>
    <script>
        window.onload = function() {
            canvasPlanet = document.getElementById("canvasPlanet");
            contextPlanet = canvasPlanet.getContext("2d");
            canvasBG = document.getElementById("canvasBackground");
            contextBG = canvasBG.getContext("2d");

            let change = .6;/* w w w.  j a va2 s  .co m*/
            let xPos = canvasPlanet.width / 2;
            let interval = 33;
            let yPos = canvasPlanet.height / 2;
            let radius = 0;
            let angle = 0;
            let radiusMin = 100;
            let radiusMax = 175;
            let numStars1 = 2000;
            let colorStar1 = "white";
            let numStars2 = 400;
            let colorStar2 = "gray";
            let numStars3 = 30;
            let colorStar3 = "darkgray";
            let planetSize = 12;
            let sunSize = 45;
            let imageCount = 0;
            let imageQuant = 2;

            //BACKGROUND canvas color.
            contextBG.fillStyle = "black";
            contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height);

            //STARS drawing.
            for (let n = 0; n < numStars1; n++) {
                let xStar = Math.random() * canvasBG.width;
                let yStar = Math.random() * canvasBG.height;
                contextBG.fillStyle = colorStar2;
                contextBG.fillRect(xStar, yStar, 1, 1);
            }
            for (let n = 0; n < numStars2; n++) {
                let xStar = Math.random() * canvasBG.width;
                let yStar = Math.random() * canvasBG.height;
                contextBG.fillStyle = colorStar2;
                contextBG.fillRect(xStar, yStar, 2, 2);
            }
            for (let n = 0; n < numStars3; n++) {
                let xStar = Math.random() * canvasBG.width;
                let yStar = Math.random() * canvasBG.height;
                contextBG.fillStyle = colorStar3;
                contextBG.fillRect(xStar, yStar, 3, 3);
            }
            let planet = new Image();
            planet.src = "http://java2s.com/style/demo/jet2.png";
            let sun = new Image();
            sun.src = "http://java2s.com/style/demo/jet.png";

            sun.onload = function() {
                contextBG.drawImage(sun, 200, 175, sunSize, sunSize);

                imageCount++;

                if (imageCount == imageQuant)
                {
                    let intervalID = setInterval(drawPlanet, interval)
                }
            }
            planet.onload = function() {
                contextPlanet.translate(xPos, yPos);

                imageCount++;

                if (imageCount == imageQuant)

                {
                    let intervalID = setInterval(drawPlanet, interval)
                }
            }
            function drawPlanet() {

                contextPlanet.clearRect(-canvasPlanet.width / 2, -canvasPlanet.height / 2,
                    canvasPlanet.width, canvasPlanet.height);

                //RADIUS calculation
                let angleR = (Math.PI / 180) * angle;
                let calcAS = radiusMax * Math.sin(angleR);
                let calcBC = radiusMin * Math.cos(angleR);
                radius = (radiusMax * radiusMin) / Math.sqrt((calcAS * calcAS) + (calcBC * calcBC));

                //ROTATE image.
                contextPlanet.rotate(((Math.PI) / 180) * -change);
                angle = angle + change;

                //DRAW PLANET.
                contextPlanet.drawImage(planet, radius, 0, planetSize, planetSize);
            }
        }
    </script>
</head>

<body>
    <div>
        <canvas id="canvasPlanet" width="400" height="400" style="border:2px solid black;
                 position:absolute; left:auto; top:auto;
                 z-index: 2">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
        <canvas id="canvasBackground" width="400" height="400" style="border:2px solid black;
                 position:absolute; left:auto; top:auto;
                 z-index: 1">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
    </div>
</body>

</html>
HTML5 Game - Use two canvas, one for background

Description

Demo

Related Topic
