Javascript 是否可以使用Web Worker运行更新网格的函数？

我有一个代码块，我想尝试在Web worker上运行，但我无法让它工作，因为worker中没有定义“document.”。所以我想知道是否有可能在工作者身上运行这样的代码。它可以获得点击事件等

代码在画布上创建网格，并在单击的位置设置clearRect

//Declare varibles
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');


var cellSize = 12;
var gridColor = "#1f1f1f";
var largeGridColor = "#2e2e2e";


//set canvas resolution to screen resolution
ctx.canvas.width = 1920;
ctx.canvas.height = 932;

var cellsInRow = parseInt(ctx.canvas.height/cellSize);
var cellsInCollum = parseInt(ctx.canvas.width/cellSize);

//create array
let arry = [];



for(var i = 0; i < cellsInRow; i++){
    
    arry[i] = [];
    
    for(var j = 0; j < cellsInCollum; j++){
        
        arry[i][j] = 0;
    }
}

let arryOld = arry.map(row => [...row]);



//draw on canvas

setInterval(drawCells, 1);
canvasBackground();
canvasGrid();
randomStartPattern()


function getCursorPointer(canvas, event){
    const rect = canvas.getBoundingClientRect();
    
    let scaleX = canvas.width / rect.width;
    let scaleY = canvas.height / rect.height;
    
    const x = (event.clientX - rect.left)*scaleX;
    const y = (event.clientY - rect.top)*scaleY;
    
    console.log("x: " + x + " y: " + y);
    
    let xP = (x);
    let yP = (y);
    
    setCell(xP, yP);
    
}

canvas.addEventListener('mousedown', function(e){
    
    getCursorPointer(canvas, e);                        
});



function setCell(x, y){
    
    for(var i = 0; i < cellsInRow; i++){
        
        for(var j = 0; j < cellsInCollum; j++){
        
            if((y >= (i*cellSize) && y <= ((i*cellSize)+cellSize-1)) &&(x >= (j*cellSize) && x <= ((j*cellSize)+cellSize-1))){
                if(arry[i][j] == 0){
                    arry[i][j] = 1;  
                }else{
                    arry[i][j] = 0;  
                }
            }
        }
    }
}


function drawCells(){
     for(var i = 0; i < cellsInRow; i++){
        
        for(var j = 0; j < cellsInCollum; j++){
            
            if(arry[i][j] == 1){
                ctx.clearRect(j * cellSize+1, i * cellSize+1, cellSize-2, cellSize-2);

            }else{
                ctx.fillStyle ="black";
                ctx.fillRect(j * cellSize+1, i * cellSize+1, cellSize-2, cellSize-2); 
            }
        }
    }
}

function canvasBackground(){
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function canvasGrid(){
    for(var i = 0; i < cellsInRow; i++){

        if(i%10 == 0){
            ctx.strokeStyle = largeGridColor;
        }else{
            ctx.strokeStyle = gridColor;   
        }
        ctx.beginPath();
        ctx.moveTo(0, i*cellSize);
        ctx.lineTo(canvas.width, i*cellSize);
        ctx.lineWidth = 1;
        ctx.stroke();
        
        for(var j = 0; j < cellsInCollum; j++){
            
           if(j%10 == 0){
                ctx.strokeStyle = largeGridColor;
            }else{
                ctx.strokeStyle = gridColor;   
            }
            
            ctx.beginPath();
            ctx.moveTo(j*cellSize, 0);
            ctx.lineTo(j*cellSize, canvas.height);
            ctx.lineWidth = 1;
            ctx.stroke();
        }
    }
}


function randomStartPattern(){
    
      for(var i = 0; i < cellsInRow; i++){
        
        for(var j = 0; j < cellsInCollum; j++){
           
            let rand  = Math.random();
            
            if(rand < 0.5){
                arry[i][j] = 1;
            }else{
                arry[i][j] = 0;
            }
        }
    }
}

//声明变量
const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
var-cellSize=12；
var gridColor=“#1f”；
var largeGridColor=“#2e”；
//将画布分辨率设置为屏幕分辨率
ctx.canvas.width=1920；
ctx.canvas.height=932；
var cellsInRow=parseInt（ctx.canvas.height/cellSize）；
var cellsInCollum=parseInt（ctx.canvas.width/cellSize）；
//创建数组
让arry=[]；
对于（var i=0；i[…row]）；
//在画布上画画
设置间隔（牵引单元，1）；
游说背景（）；
canvasGrid（）；
随机起始模式（）
函数getCursorPointer（画布、事件）{
const rect=canvas.getBoundingClientRect（）；
设scaleX=canvas.width/rect.width；
设scaleY=canvas.height/rect.height；
常量x=（event.clientX-rect.left）*scaleX；
常量y=（event.clientY-rect.top）*scaleY；
控制台日志（“x:+x+”y:+y）；
设xP=（x）；
设yP=（y）；
setCell（xP，yP）；
}
canvas.addEventListener（'mousedown'，函数（e）{
getCursorPointer（画布，e）；
});
函数设置单元（x，y）{
对于（var i=0；i如果（（y>=（i*cellSize）和&y=（j*cellSize）和&x它应该像这样工作：

/// ================= MAIN SCRIPT ====================
const worker = new Worker('./your_worker.js');

function getCursorPointer(canvas, event){
    const rect = canvas.getBoundingClientRect();
    
    let scaleX = canvas.width / rect.width;
    let scaleY = canvas.height / rect.height;
    
    const x = (event.clientX - rect.left)*scaleX;
    const y = (event.clientY - rect.top)*scaleY;
    
    console.log("x: " + x + " y: " + y);

    worker.postMessage({x, y});
}

canvas.addEventListener('mousedown', function(e){
    getCursorPointer(canvas, e);                        
});

const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({offscreen}, [offscreen]);

这里使用DOM，并使用postMessage将事件传递给worker

// ==================== WORKER CODE ===========================
let ctx;
const arry = []; 
onmessage = function({data}) {
    if(data.offscreen) {
        ctx = data.offscreen.getContext("2d");
        canvasBackground();
        canvasGrid();
        randomStartPattern()
        setInterval(drawCells, 1);
    } else {
        setCell(data.x, data.y);
    }
});
function drawCells(){
     for(var i = 0; i < cellsInRow; i++){
        for(var j = 0; j < cellsInCollum; j++){
            if(arry[i][j] == 1){
                ctx.clearRect(j * cellSize+1, i * cellSize+1, cellSize-2, cellSize-2);
            }else{
                ctx.fillStyle ="black";
                ctx.fillRect(j * cellSize+1, i * cellSize+1, cellSize-2, cellSize-2); 
            }
        }
    }
}

function randomStartPattern(){
      for(var i = 0; i < cellsInRow; i++){
        for(var j = 0; j < cellsInCollum; j++){
            let rand  = Math.random();
            if(rand < 0.5){
                arry[i][j] = 1;
            }else{
                arry[i][j] = 0;
            }
        }
    }
}

function setCell(x, y){
    for(var i = 0; i < cellsInRow; i++){
        for(var j = 0; j < cellsInCollum; j++){
            if((y >= (i*cellSize) && y <= ((i*cellSize)+cellSize-1)) &&(x >= (j*cellSize) && x <= ((j*cellSize)+cellSize-1))){
                if(arry[i][j] == 0){
                    arry[i][j] = 1;  
                }else{
                    arry[i][j] = 0;  
                }
            }
        }
    }
}


function canvasBackground(){
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function canvasGrid(){
    for(var i = 0; i < cellsInRow; i++){

        if(i%10 == 0){
            ctx.strokeStyle = largeGridColor;
        }else{
            ctx.strokeStyle = gridColor;   
        }
        ctx.beginPath();
        ctx.moveTo(0, i*cellSize);
        ctx.lineTo(canvas.width, i*cellSize);
        ctx.lineWidth = 1;
        ctx.stroke();
        
        for(var j = 0; j < cellsInCollum; j++){
            
           if(j%10 == 0){
                ctx.strokeStyle = largeGridColor;
            }else{
                ctx.strokeStyle = gridColor;   
            }
            
            ctx.beginPath();
            ctx.moveTo(j*cellSize, 0);
            ctx.lineTo(j*cellSize, canvas.height);
            ctx.lineWidth = 1;
            ctx.stroke();
        }
    }
}

//==================================工作代码===========================
让ctx；
常数=[]；
onmessage=函数（{data}）{
if（屏幕外数据）{
ctx=data.offscreen.getContext（“2d”）；
游说背景（）；
canvasGrid（）；
随机起始模式（）
设置间隔（牵引单元，1）；
}否则{
setCell（data.x，data.y）；
}
});
函数drawCells（）{
对于（var i=0；i=（i*cellSize）和&y=（j*cellSize）和&x