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

Question

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

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

Возможно?

Answer 1

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

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

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

DEMO

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

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

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

Answer 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);
}

Answer 3

Очевидно, существует новая вещь под названием OffscreenCanvas, специально разработанная для этого варианта использования.Дополнительным бонусом является то, что он также работает в Web Workers.

Вы можете прочитать спецификации здесь: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface

И посмотреть примеры здесь: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

В настоящее время этотолько полностью поддерживается Chrome и доступен за флагами в Firefox и Opera, но вы всегда можете проверить последнюю информацию о поддерживаемых браузерах здесь: https://caniuse.com/#feat=offscreencanvas

ps. У Google также есть специальное руководство, объясняющее егоиспользовать в веб-рабочих: https://developers.google.com/web/updates/2018/08/offscreen-canvas