HTML5 Game - Canvas Creating Gradients

Introduction

Gradients create transitions between colors, and they can be linear or radial:
Demo

<!DOCTYPE HTML>
<html>

<head>
    <script>
        window.onload = function() {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");

            let xPos = 20;//w w w .  j a  v  a  2  s.c om
            let yPos = 20;
            let gap = 20;
            let width = 80;
            let height = 80;

            context.shadowOffsetX = 4;
            context.shadowOffsetY = 4;
            context.shadowBlur = 3;
            context.shadowColor = "gray";
            context.lineWidth = 4;

            let gradLH = context.createLinearGradient(20, 0, 100, 0);
            let gradLV = context.createLinearGradient(0, 0, 0, 100);

            let gradLD = context.createLinearGradient(
                xPos + (2 * width) + (2 * gap),
                yPos,
                xPos + 220 + width,
                yPos + height);

            let gradRC = context.createRadialGradient(
                xPos + (3 * width) + (3 * gap) + (width / 2),
                yPos + (height / 2),
                5,
                xPos + (3 * width) + (3 * gap) + (width / 2),
                yPos + (height / 2),
                50);

            let gradRO = context.createRadialGradient(
                xPos + (4 * width) + (4 * gap) + (width / 4),
                yPos + (height / 2),
                15,
                xPos + (4 * width) + (4 * gap) + (width / 2),
                yPos + (height / 2),
                40);
            gradLH.addColorStop(0, "red");
            gradLH.addColorStop(.3, "orange");
            gradLH.addColorStop(.6, "blue");
            gradLH.addColorStop(1, "yellow");

            gradLV.addColorStop(0, "red");
            gradLV.addColorStop(.4, "blueviolet");
            gradLV.addColorStop(1, "gold");

            gradLD.addColorStop(0, "yellow");
            gradLD.addColorStop(.5, "orange");
            gradLD.addColorStop(1, "blue");

            gradRC.addColorStop(0, "red");
            gradRC.addColorStop(.5, "turquoise");
            gradRC.addColorStop(1, "olive");

            gradRO.addColorStop(0, "yellow");
            gradRO.addColorStop(.7, "magenta");
            gradRO.addColorStop(1, "limegreen");

            // LINEAR gradients.
            context.fillStyle = gradLH;
            context.fillRect(xPos + (0 * width) + (0 * gap), yPos, width, height);
            context.fillStyle = gradLV;
            context.fillRect(xPos + (1 * width) + (1 * gap), yPos, width, height);
            context.fillStyle = gradLD;
            context.fillRect(xPos + (2 * width) + (2 * gap), yPos, width, height);
            context.strokeStyle = gradLD;
            context.beginPath();
            context.moveTo(xPos, yPos + height + gap);
            context.lineTo(xPos + (5 * width) + (4 * gap), yPos + height + gap);
            context.stroke();

            // RADIAL gradients.
            context.fillStyle = gradRC;
            context.fillRect(xPos + (3 * width) + (3 * gap), yPos, width, height);
            context.fillStyle = gradRO;
            context.fillRect(xPos + (4 * width) + (4 * gap), yPos, width, height);
        }
    </script>
</head>

<body>
    <div style="width:525px;   height:150px;
                  margin:0 auto; padding:5px;">
        <canvas id="canvasArea" width="525" height="150" style="border:2px solid black">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
    </div>
</body>

</html>
HTML5 Game - Canvas Creating Gradients

Introduction

Demo

Related Topic
