web-dev-qa-db-fra.com

Est-il possible de créer un canevas HTML sans élément DOM?

J'aimerais disposer d'un contexte de canevas HTML dans lequel je peux peindre et lire à l'écran (dans cet exemple, écrire du texte et lire la forme créée, mais c'est une question générale). Je pourrais aussi vouloir utiliser un canevas comme mémoire tampon hors écran.

Je suppose que je pourrais créer un élément DOM masqué, mais que je préfère le créer à partir de JavaScript (je souhaiterais peut-être créer et détruire un certain nombre de canevas au moment de l'exécution).

Possible?

javascripthtml5html5-canvas
37
Joe

Vous pouvez créer un nouvel élément canvas avec document.createElement:

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

et ensuite obtenir le contexte de celui-ci. Assurez-vous simplement que vous avez défini width et height. Il n'est pas nécessaire d'ajouter la toile à l'arbre pour que cela fonctionne: 

DÉMO

Mais vous devez absolument créer ce noeud. Vous pouvez créer une fonction pour cela si:

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

Mais c’est là que se termine ma compétence. Que vous puissiez transférer un contexte dans un autre contexte ou dans un canevas, je ne sais pas ...

45
Felix Kling

C'est vieux mais qu'en est-il d'enregistrer une toile avec toDataURL et de la copier sur une autre avec drawImage. vous pouvez également utiliser save et restore pour créer un tampon d'images

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

Il y a apparemment une nouvelle chose appelée OffscreenCanvas qui a été délibérément conçue pour ce cas d'utilisation. Un bonus supplémentaire est que cela fonctionne également dans les travailleurs Web.

Vous pouvez lire les spécifications ici: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface

Et voyez des exemples ici: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

Actuellement, il est uniquement pris en charge par Chrome et est disponible derrière les drapeaux dans Firefox et Opera, mais vous pouvez toujours consulter les informations les plus récentes sur les navigateurs pris en charge ici: https://caniuse.com/#feat=offscreencanvas

ps .: Google propose également un guide dédié expliquant son utilisation dans Web Workers: https://developers.google.com/web/updates/2018/08/offscreen-canvas

0
Isti115