Возможно ли создать холст HTML без элемента DOM?

Я хотел бы иметь контекст HTML canvas, который я могу рисовать и читать вне экрана (в этом примере, написание текста и чтение созданной фигуры, но это общий вопрос). Я также могу использовать холст в качестве кадрового буфера вне экрана.

Я предполагаю, что могу создать скрытый элемент DOM, но я бы скорее создал его из JavaScript (я могу создать и уничтожить несколько холстов во время выполнения).

Ответы

Ответ 1

Вы можете создать новый элемент canvas с document.createElement:

var canvas = document.createElement('canvas');

а затем получить контекст из него. Просто убедитесь, что вы установили width и height. Вам не нужно добавлять холст к дереву, чтобы он работал:

DEMO

Но вам определенно нужно создать node. Вы могли бы создать для этого функцию:

function createContext(width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas.getContext("2d");
}

Но вот где заканчивается моя компетенция... можете ли вы каким-то образом перевести контекст в другой контекст или холст, я не знаю...

Ответ 2

Его старый, но как насчет сохранения одного холста с помощью toDataURL и копирования другого с drawImage. вы также можете использовать сохранение и восстановление для создания буфера кадров

    function createCanvas(width, height) {
    var c = document.createElement('canvas');
    c.setAttribute('width', width);
    c.setAttribute('height', height);
    return c;
}

function canvasImg(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.fillRect(0,0,canvas.width, canvas.height);
    var img = canvas.toDataURL('image/png');

    return img;
}

function placeImage(canvas, img) {
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0,0);
}

window.onload = function(){
    var canvas = createCanvas(400, 400);
    var hiddenCanvas = createCanvas(400,400);
    var i = canvasImg(hiddenCanvas);
    var img = new Image();
    img.src = i;
    placeImage(canvas, img);
    document.body.appendChild(canvas);
}