GlobalAlpha

All canvas drawing operations that are coded after the globalAlpha value has been set will have the alpha value applied to them

GlobalAlpha

Example of a globalAlpha canvas (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            img,
            canvas
            {
                width:500px;
                height:500px;
                border: thin solid black;
            }

            #loadingMessage
            {
                position:absolute;
                top:100px;
                left:100px;
                z-index:100;
                font-size:50px;
            }
        </style>

        <script>
            let canvas = null
            let ctx = null
            let originalImage = null
            let width = null
            let height = null


            window.onload = onAllAssetsLoaded
            document.write("<div id='loadingMessage'>Loading...</div>")
            function onAllAssetsLoaded()
            {
                // hide the webpage loading message
                document.getElementById('loadingMessage').style.visibility = "hidden"

                canvas = document.getElementById('canvas')
                ctx = canvas.getContext('2d')
                originalImage = document.getElementById('originalImage')
                width = originalImage.clientWidth
                height = originalImage.clientHeight
                canvas.width = width
                canvas.height = height

                renderCanvas()
            }


            function renderCanvas()
            {
                // set the alpha
                ctx.globalAlpha = 0.25

                // draw an image using the alpha
                ctx.drawImage(originalImage, 0, 0, width, height)

                // reset the alpha
                ctx.globalAlpha = 1.0

                // draw an image using the reset alpha
                ctx.drawImage(originalImage, width - 100, height - 100, 100, 100)
            }
        </script>
    </head>

    <body>
        <img id = 'originalImage' src = 'images/dancing.png'>
        <canvas id = 'canvas'></canvas>
    </body>
</html>

Write code to place a faded copyright text on a canvas image.