Un moyen de cloner un élément de canevas HTML5 avec son contenu?

Question

Est-il possible de créer une profondeur copie d'un élément de canevas avec tout le contenu dessiné?

Answer 1

En fait, la bonne façon de copier les données de la toile est de passer la vieille toile à la nouvelle toile vierge. Essayez cette fonction. L'utilisation de getImageData est pour l'accès aux données de pixels, et non pour la copie de canevas. La copie avec est très lente et dure sur le navigateur. Cela devrait être évité.

Answer 2

Vous pouvez appeler

context.getImageData(0, 0, context.canvas.width, context.canvas.height); 

qui renverra un objet ImageData. Cela a une propriété nommée data de type CanvasPixelArray qui contient les valeurs rgb et de transparence de tous les pixels. Ces valeurs ne sont pas des références à la toile et peuvent donc être modifiées sans affecter le canevas.

Si vous souhaitez également une copie de l'élément, vous pouvez créer un nouvel élément canvas, puis copier tous les attributs dans le nouvel élément canvas. Après cela, vous pouvez utiliser la méthode

context.putImageData(imageData, 0, 0); 

pour dessiner l'objet ImageData sur le nouvel élément canvas.

Voir cette réponse pour plus de détails getPixel from HTML Canvas? sur la manipulation des pixels.

Vous trouverez peut-être cet article mozilla utile aussi bien https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes