Before you start
To understand this article, it is recommended to be comfortable with {{Glossary("JavaScript")}}, the {{Glossary("Canvas")}} {{Glossary("API")}} and the {{Glossary("DOM")}} {{Glossary("API")}}
It's even better if you are also familiar with {{Glossary("SVG")}}.
Although it's not trivial (for security reasons), it's possible to draw {{Glossary("DOM")}} content—such as {{Glossary("HTML")}}—into a {{Glossary("canvas")}}. This article, derived from this blog post by Robert O'Callahan, covers how you can do it securely, safely, and in accordance with the specification.
An overview
You can't just draw HTML into a canvas. Instead, you need to use an {{Glossary("SVG")}} image containing the content you want to render. To draw HTML content, you'd use a {{SVGElement("foreignObject")}} element containing the HTML, then draw that SVG image into your canvas.
Step-by-step
The only really tricky thing here—and that's probably an overstatement—is creating the SVG for your image. All you need to do is create a string containing the {{Glossary("XML")}} for the SVG and construct a {{domxref("Blob")}} with the following parts.
- The MIME media type of the blob should be "image/svg+xml".
- The {{SVGElement("svg")}} element.
- Inside that, the {{SVGElement("foreignObject")}} element.
- The (well-formed) HTML itself, nested inside the {{SVGElement("foreignObject")}}.
By using an object {{Glossary("URL")}} as described above, we can inline our HTML instead of having to load it from an external source. You can, of course, use an external source if you prefer, as long as the origin is the same as the originating document.
Example
HTML
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"> </canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="https://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="https://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
The example above will produce the following
{{EmbedLiveSample("Example","210","210","https://mdn.mozillademos.org/files/3616/example.png")}}
The data variable is set up with the content of the {{Glossary("SVG")}} image (which in turn includes the {{Glossary("HTML")}}) we want to draw into our {{Glossary("canvas")}}.
Then we create a new HTML {{HTMLElement("img")}} element by calling new Image(), append data, allocate an object URL, and draw the image into the context by calling drawImage() on load.
Security
You might wonder how this can be secure, in light of concerns about the possibility of reading sensitive data out of the canvas. The answer is this: this solution relies on the fact that the implementation of SVG images is very restrictive. SVG images aren't allowed to load any external resources, for example, even ones that appear to be from the same domain. Resources such as raster images (such as JPEG images) or {{HTMLElement("iframe")}}s have to be inlined as data: URIs.
In addition, you can't include script in an SVG image, so there's no risk of access to the {{Glossary("DOM")}} from other scripts, and DOM {{Glossary("Element","elements")}} in SVG images can't receive input events, so there's no way to load privileged information into a form control (such as a full path into a file {{HTMLElement("input")}} element) and render it, then pull that information out by reading the pixels.
Visited-link styles aren't applied to links rendered in SVG images, so history information can't be retrieved, and native themes aren't rendered in SVG images, which makes it harder to determine the user's platform.
The resulting canvas should be origin clean, meaning you can call toBlob(function(blob){…}) to return a blob for the canvas, or toDataURL() to return a Base64-encoded data: URI.
Drawing HTML
Since {{Glossary("SVG")}} must be valid {{Glossary("XML")}}, you need to parse {{Glossary("HTML")}} to get the well-formed output of the HTML parser. The following code is the easiest way to parse HTML.
var doc = document.implementation.createHTMLDocument("");
doc.write(html);
// You must manually set the xmlns if you intend to immediately serialize
// the HTML document to a string as opposed to appending it to a
// <foreignObject> in the DOM
doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);
// Get well-formed markup
html = (new XMLSerializer).serializeToString(doc);
See also
- Canvas
- Canvas tutorial
- Drawing DOM content to canvas (blog post)
- rasterizeHTML.js, an implementation following this post
- Drawing math equations into a canvas, using TeXZilla.