CODEWITHSUNDEEP
html5-canvas
alli prashanth
alli prashanth

Reputation: 169

how to use html content inside a canvas element

Can any one tell me how to place my html content on a canvas.And if we can do that, will the properties and events of those elements works or not, and also I have animations drawn on that canvas.

Upvotes: 4

Views: 12104

Answers (1)

user1693593
user1693593

Reputation:

From this article on MDN:

You can't just draw HTML into a canvas. Instead, you need to use an SVG image containing the content you want to render. To draw HTML content, you'd use a element containing the HTML, then draw that SVG image into your canvas.

It than suggest you follow these steps:

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 XML for the SVG and construct a Blob with the following parts.

  1. The MIME media type of the blob should be "image/svg+xml".
  2. The element.
  3. Inside that, the element.
  4. The (well-formed) HTML itself, nested inside the .

By using a object 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.

The following example is provided (you can see more information about this in this blog by Robert O'Callahan):

DEMO

const ctx = document.getElementById("canvas").getContext("2d");
const data = `
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
  <foreignObject width='100%' height='100%'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>
      <em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>CANVAS</span>
    </div>
  </foreignObject>
</svg>
`;
const img = new Image();
const svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
const url = URL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  URL.revokeObjectURL(url);
};
img.src = url;
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>

This example results in this HTML being rendered to canvas as this:

HTML to canvas snapshot

Will the properties and events of those elements works or not ?

No, everything drawn to a canvas is forgotten as passive pixels - they becomes simply an image.

You will need to provide custom logic that you provide yourselves in order to to handle any such things as clicks, objects, events etc. The logic need to define the areas, objects and anything else.

Upvotes: 5

Related Questions