Canvas JavaScript

A Simple Offscreen Canvas

This JavaScript program demonstrates how to use an offscreen canvas to render an image and transfer it to the main visible canvas element.

SimpleOffscreenCanvas.html

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />
  <head>
  	<title>XoaX.net's Javascript</title>
  	<script src="Main.js"></script>
  </head>
  <body onload="Initialize()">
  	<canvas width="400" height="400" id="idCanvas" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

Main.js

function Initialize() {
	var qMainCanvas = document.getElementById("idCanvas");
	var qMainContext = qMainCanvas.getContext("2d");
	// Create a worker
	var qWorker = new Worker("Worker.js");
	// This handles the bitmap that is returned from the worker and renders it.
	qWorker.onmessage = function(qEvent) {
		let qBitmap = qEvent.data.mqBitmap;
		qMainContext.drawImage(qBitmap, 0, 0);
	}
	// Create an offscreen canvas for rendering inside the worker
	var qOffscreenCanvas = new OffscreenCanvas(400, 400);
	qWorker.postMessage({mqCanvas : qOffscreenCanvas}, [qOffscreenCanvas]);
}

Worker.js

onmessage = function (qEvent) {
  let qCanvas = qEvent.data.mqCanvas;
  let qContext2D = qCanvas.getContext("2d");

  Draw(qContext2D);
  // Create a bitmap of the canvas that is sent back
  var qBitmap = qCanvas.transferToImageBitmap();
  postMessage({mqBitmap:qBitmap});
}

function Draw(qContext2D) {
	qContext2D.font = "60px Times";
	qContext2D.strokeStyle = "red";
	qContext2D.strokeText("XoaX.net", 50 + Math.random()*100, 50 + Math.random()*100);
}
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.