Offscreen Canvas

An offscreen canvas is a canvas that is not visible on the screen. It can be used to construct the contents of a canvas prior to displaying the contents.

An offscreen canvas is just a canvas element. To create a canvas element we use the code below:

let offscreenCanvas = document.createElement('canvas')

As with any other canvas, we can associate a 2d graphic context with an offscreen canvas, as shown in the code below

   
let offscreenCanvasCtx = offscreenCanvas.getContext('2d')

We need to ensure that the offscreen canvas is the exact same size as the on-screen canvas that it is being associated with, as shown below:

offscreenCanvas.width = canvas.clientWidth
offscreenCanvas.height = canvas.clientHeight

To draw an offscreen canvas onto another canvas, pass the offscreenCanvas as the element to be drawn, as shown below:

ctx.drawImage(offscreenCanvas,0, 0, width, height)  // pass offscreenCanvas. Do not mistakenly pass offscreenCanvasCtx

Example of an offscreen 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>
            #canvas
            {
                border:1px solid black;
                width:500px;
                height:500px;
            }

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

        <script>
            let canvas = null
            let ctx = null

            let offscreenCanvas
            let offscreenCanvasCtx

            let backgroundImage = new Image()
            backgroundImage.src = "images/dkit_02.jpg"
            let offscreenCanvasImage = new Image()
            offscreenCanvasImage.src = "images/dkit_03.jpg"

            let offscreenCanvasImageX = 100
            let offscreenCanvasImageY = 100
            let offscreenCanvasImageWidth = 300
            let offscreenCanvasImageHeight = 200

            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")
                canvas.width = canvas.clientWidth
                canvas.height = canvas.clientHeight

                offscreenCanvas = document.createElement('canvas')
                offscreenCanvasCtx = offscreenCanvas.getContext('2d')
                offscreenCanvas.width = canvas.clientWidth
                offscreenCanvas.height = canvas.clientHeight

                renderCanvas()
            }


            function renderCanvas()
            {
                ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height)

                // draw the second image onto the offscreenCanvas
                offscreenCanvasCtx.drawImage(offscreenCanvasImage, offscreenCanvasImageX, offscreenCanvasImageY, offscreenCanvasImageWidth, offscreenCanvasImageHeight)

                // draw the offscreen canvas onto the screen's canvas
                ctx.drawImage(offscreenCanvas, 0, 0, canvas.width, canvas.height)
            }


            // Convert from degrees to radians.
            Math.radians = function (degrees)
            {
                return degrees * Math.PI / 180
            }
        </script>
    </head>
    <body>
        <canvas id = "canvas">
            Your browser does not support the HTML5 'Canvas' tag.
        </canvas>
    </body>
</html>

The example above is given only to illustrate how to use an offscreen buffer. In the above example, instead of using an offscreen canvas, we could draw the foreground image directly onto the canvas. Adjust the code above so that it does not use an offscreen canvas, as shown here.

We have to use an offscreen canvas whenever we want to manipulate AND rotate an image. Write code to invert an image, rotate it by 45 degrees, and then draw it on a canvas, as shown here.