{"json_modified": "2016-10-13T19:03:30.332944", "uuid": "c5f8cee7-ccbc-41e7-8423-a26ecb56b15d", "title": "Drawing DOM objects into a canvas", "url": "/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas", "tags": ["Canvas", "Intermediate", "Guide", "SVG", "HTML", "DOM"], "translations": [{"uuid": "001b999b-4dfb-4b21-b5cf-a14de4b91304", "title": "Drawing DOM objects into a canvas", "url": "/es/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas", "tags": [], "summary": "Aunque no es trivial (por razones de seguridad), es posible dibujar contenido <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/DOM\" title=\"DOM: The DOM (Document Object Model) is an API that represents and&#xA0;interacts with any HTML or XML&#xA0;document. The DOM is a document model loaded in the browser and representing the document as a node tree,&#xA0;where each node represents part of the&#xA0;document (e.g. an element, text string, or comment).\">DOM</a> \u2014como\u00a0 <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/HTML\" title=\"HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.\">HTML</a>\u2014dentro de <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/canvas\" title=\"canvas: The HTML &lt;canvas&gt; element provides an empty graphic zone on&#xA0;which&#xA0;specific JavaScript APIs&#xA0;can draw (such as Canvas 2D or WebGL).\">canvas</a>. Este art\u00edculo, derivado de <a href=\"https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html\">this blog post</a> de Robert O'Callahan, abarca c\u00f3mo puedes hacerlo de forma segura y de acuerdo a la especificaci\u00f3n.", "localization_tags": [], "locale": "es", "last_edit": "2015-08-19T10:49:49", "review_tags": []}, {"uuid": "ab6f144d-6e96-4dab-871c-2955eda1b02e", "title": "Dessiner des objets DOM dans un \u00e9l\u00e9ment canvas", "url": "/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas", "tags": ["Canvas"], "summary": "Bien que ce ne soit pas trivial (pour des raisons de s\u00e9curit\u00e9), il est possible de dessiner du contenu DOM (comme du HTML) dans un \u00e9l\u00e9ment <code>canvas</code>. Cet article, qui tire son origine de <a href=\"https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html\" title=\"https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html\">ce billet</a> de Robert O'Callagan, explique comment le faire de mani\u00e8re s\u00e9curis\u00e9e et sans danger en respectant la sp\u00e9cification.", "localization_tags": [], "locale": "fr", "last_edit": "2013-07-18T13:23:17", "review_tags": []}, {"uuid": "f391271f-1029-4802-958a-75d487e27cf9", "title": "DOM \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092 Canvas \u306b\u63cf\u753b\u3059\u308b", "url": "/ja/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas", "tags": ["DOM", "Canvas", "SVG", "HTML"], "summary": "\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u4e0a\u306e\u7406\u7531\u304b\u3089\u7c21\u5358\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001HTML \u306a\u3069 DOM \u306e\u5185\u5bb9\u3092 canvas \u306b\u63cf\u753b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u306f Robert O'Callahan \u306b\u3088\u308b<a class=\"external\" href=\"https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html\">\u30d6\u30ed\u30b0\u8a18\u4e8b</a>\u3092\u3082\u3068\u306b\u3001\u30bb\u30ad\u30e5\u30a2\u306b\u3001\u5b89\u5168\u306b\u3001\u305d\u3057\u3066\u4ed5\u69d8\u306b\u6e96\u62e0\u3057\u305f\u304b\u305f\u3061\u3067\u305d\u308c\u3092\u5b9f\u73fe\u3059\u308b\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2013-05-09T14:05:40", "review_tags": []}, {"uuid": "19d95a13-3480-4cd6-be93-bf2e41e2d9a2", "title": "\u5c06 DOM \u5bf9\u8c61\u7ed8\u5236\u5230 canvas \u4e2d", "url": "/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas", "tags": ["Canvas", "SVG", "\u8fdb\u9636", "\u6307\u5357", "HTML", "DOM"], "summary": "\u5c06 <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/DOM\" title=\"DOM: The DOM (document object model) is an API that represents and&#xA0;interacts with any HTML or XML&#xA0;document. The DOM is a document model loaded in the browser and representing the document as a node tree,&#xA0;where each node represents part of the&#xA0;document (e.g. an element, text string, or comment).\">DOM</a> \u5185\u5bb9\uff08\u5982 <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/HTML\" title=\"HTML: HTML (hypertext markup language) is a descriptive language that specifies webpage structure.\">HTML</a>\uff09\u7ed8\u5236\u5230 <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/canvas\" title=\"canvas: The HTML &lt;canvas&gt; element provides an empty graphic zone on&#xA0;which&#xA0;specific JavaScript APIs&#xA0;can draw (such as Canvas 2D or WebGL).\">canvas</a> \u4e2d\u662f\u53ef\u884c\u7684\uff0c\u5c3d\u7ba1\u8fd9\u4e0d\u5e38\u89c1\uff08\u51fa\u4e8e\u5b89\u5168\u539f\u56e0\uff09\u3002\u8fd9\u7bc7\u6587\u7ae0\u6e90\u81ea Robert O'Callahan \u7684<a href=\"https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html\">\u535a\u5ba2</a>\uff0c\u8bb2\u8ff0\u5982\u4f55\u6309\u7167\u89c4\u8303\u5b89\u5168\u5730\u5b9e\u73b0\u8fd9\u4e2a\u529f\u80fd\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2015-04-30T01:57:57", "review_tags": []}], "modified": "2016-10-13T19:03:30", "label": "Drawing DOM objects into a canvas", "localization_tags": [], "locale": "en-US", "id": 2507, "last_edit": "2016-10-13T19:03:23", "summary": "Although it's not trivial (for security reasons), it's possible to draw <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/DOM\" title=\"DOM: The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).\">DOM</a> content\u2014such as <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/HTML\" title=\"HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.\">HTML</a>\u2014into a <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/canvas\" title=\"canvas: The HTML &lt;canvas&gt; element provides an empty graphic zone on&#xA0;which&#xA0;specific JavaScript APIs&#xA0;can draw (such as Canvas 2D or WebGL).\">canvas</a>. This article, derived from <a href=\"https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html\" title=\"https://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html\">this blog post</a> by Robert O'Callahan, covers how you can do it securely, safely, and in accordance with the specification.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "An_overview", "title": "An overview"}, {"id": "Step-by-step", "title": "Step-by-step"}, {"id": "Example", "title": "Example"}, {"id": "HTML", "title": "HTML"}, {"id": "JavaScript", "title": "JavaScript"}, {"id": "Security", "title": "Security"}, {"id": "Drawing_HTML", "title": "Drawing HTML"}, {"id": "See_also", "title": "See also"}], "slug": "Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas", "review_tags": ["technical"]}