Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <blockquote>Short answer: No, you cannot.</blockquote> <p><strong>Long answer:</strong> Not reliably, BUT yes you can in certain (possibly hackish) ways. The key is in what you define as an "image". You are aware that you can add an image to the canvas with <code>drawImage()</code> - what you mightn't be aware of is what that "image" can be (not necessarily an actual image).</p> <p>Firstly, the "image" can be a HTML5 video element - so you can add videos to the canvas. Secondly, in most modern browsers the "image" can be an SVG document, which can contain HTML via the SVG <code>&lt;foreignObject&gt;</code> element.</p> <p><strong>Browser support:</strong></p> <ul><li>SVG documents in <code>drawImage()</code> are not currently supported in Firefox. The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=276431" rel="noreferrer">related bug is here</a> and I think a fix is planned.</li> <li><code>&lt;foreignObject&gt;</code> is buggy in most browsers - Firefox (ironically) seems to have the best support.</li> </ul> <p><strong>Example:</strong></p> <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt; &lt;foreignObject x="0" y="0" height="800" width="800"&gt; &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;p&gt;Hello world!&lt;/p&gt; &lt;input type="date"/&gt; &lt;/body&gt; &lt;/foreignObject&gt; &lt;/svg&gt;</code></pre> <p>Try loading that file with canvas <code>drawImage()</code> in Opera - as you'll see its interactivity is fairly buggy, but it displays fine.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload