É assim que meu código se parece:

document.addEventListener('DOMContentLoaded', function () {
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext("2d");
        var imageData = ctx.getImageData(0, 0, 300, 300);
        var tile = {
                        'id': 1,
                        'data': imageData,
                        'dataUrl': imageData.toDataUrl()
                    };
        var div = document.createElement('div');
                div.classList.add('tile');
                grid.appendChild(div);
                div.style.backgroundImage = ('url(' + tile.dataUrl + ')');
});

Estou tentando extrair parte da imagem na tela, de (0,0) com altura e largura de 300 px e converter esse objeto imageData em um dataUrl para ser usado como plano de fundo de uma div.

Eu recebo um erro: imageData.toDataUrl () não é uma função. Como posso conseguir isso?

Desde já, obrigado!