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.width;
offscreenCanvas.height = canvas.height;

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

ctx.drawImage(offscreenCanvas,0, 0, width, height);  // draw the offscreen canvas and not the graphic context

Example of an offscreen canvas (Run Example)

<!-- Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. -->

<!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>
            #gameCanvas
            {
                /* the canvas styling usually does not change */
                outline:1px solid darkgrey;
                width:500px;
                height:500px;
            }
        </style>
    </head>

    <body>
        <canvas id = 'gameCanvas'></canvas>

        <script>
            let cityImage = new Image();
            cityImage.src = "images/city.png";

            let beachImage = new Image();
            beachImage.src = "images/beach.png";

            window.onload = function ()
            {
                let canvas = document.getElementById("gameCanvas");
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;
                let ctx = canvas.getContext("2d");

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

                // draw onto the offscreen canvas
                offscreenCanvasCtx.drawImage(beachImage, 0, 0, canvas.width, canvas.height);

                // draw an image directly onto the screen's canvas
                ctx.drawImage(cityImage, 0, 0, canvas.width, canvas.height);

                // draw the offscreen buffer onto the screen's canvas
                ctx.drawImage(offscreenCanvas, 0, 0, 200, 200);
            };
        </script>
    </body>
</html>

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

The code above creates an offscreen canvas and a graphics context up the offscreen canvas. It does not have to be the same size as the HTML canvas, but it usually makes sense to match the size.

                // draw onto the offscreen canvas
                offscreenCanvasCtx.drawImage(beachImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

Drawing on an offscreen canvas is done in exactly the same way as for a HTML canvas.

                // draw the offscreen buffer onto the screen's canvas
                ctx.drawImage(offscreenCanvas, 0, 0, 200, 200);

Any canvas can be drawn onto another canvas using the drawImage() function. In this example, the offscreen canvas is drawn onto the HTML canvas.