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);  // pass the offscreen canvas and not the graphic

Example of an offscreen canvas (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Worked example from lecture notes</title>
<style>
img
{
    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;
const CANVAS_WIDTH = 500;
const CANVAS_HEIGHT = 500;
let originalImage = null;
let offscreenCanvas;
let offscreenCanvasCtx;


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('screenCanvas');
    ctx = canvas.getContext('2d');

    originalImage = document.getElementById('originalImage');
    width = originalImage.clientWidth;
    height = originalImage.clientHeight;
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

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

    renderCanvas();
}


function renderCanvas()
{
    // draw onto the offscreen canvas
    offscreenCanvasCtx.beginPath();
    offscreenCanvasCtx.fillStyle = "red"; // any colour can be used
    offscreenCanvasCtx.fillRect(70, 100, 260, 200);
    offscreenCanvasCtx.closePath();

    offscreenCanvasCtx.beginPath();
    offscreenCanvasCtx.fillStyle = "yellow";
    offscreenCanvasCtx.font = "50px Times Roman";
    offscreenCanvasCtx.fillText("Offscreen", 100, 180);
    offscreenCanvasCtx.fillText("Canvas", 125, 230);
    offscreenCanvasCtx.closePath();

    // draw an image directly onto the screen's canvas
    ctx.drawImage(originalImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

    // draw the offscreen buffer onto the screen's canvas
    ctx.drawImage(offscreenCanvas, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}
</script>
</head>

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

Using an offscreen canvas to store the user's scribbles will allow us to seperate the background image from the foreground scribbles. Use an offscreen canvas to allow the user to change the background image without losing the foreground scribble, as shown here.

Accessing a Canvas Pixel

We can access any canvas pixel using the code below.

let imageData = offscreenObstaclesCanvasG.getImageData(x, y, 1, 1);
let data = imageData.data;

if (data[3] !== 0)
{
    // This pixel is not transparent
}

We can use an offscreen canvas to test the mouse pointer against the transparent and non-transparent parts of an image. This is especially useful for accurate collision detection.

Use an offscreen canvas to do a transparancy collision detection test on the jigsaw pieces in the jigsaz game, as shown here.

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>