This JavaScript program demonstrates how to use an offscreen canvas to render an image and transfer it to the main visible canvas element.
<!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>
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]); }
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);
}
© 20072025 XoaX.net LLC. All rights reserved.