Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>EDIT November 5th, 2014</h1> <p>You can now use <code>ctx.drawImage</code> to draw HTMLImageElements that have a .svg source <strong>in some but not all browsers</strong>. Chrome, IE11, and Safari work, Firefox works with some bugs (but nightly has fixed them).</p> <pre><code>var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); } img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg"; </code></pre> <p><a href="http://jsfiddle.net/Na6X5/" rel="noreferrer">Live example here</a>. You should see a green square in the canvas. The second green square on the page is the same <code>&lt;svg&gt;</code> element inserted into the DOM for reference.</p> <p>You can also use the new Path2D objects to draw SVG (string) paths (<strong>only works in Chrome right now</strong>). In other words, you can write:</p> <pre><code>var path = new Path2D('M 100,100 h 50 v 50 h 50'); ctx.stroke(path); </code></pre> <p><a href="http://jsfiddle.net/Fur2d/" rel="noreferrer">Live example of that here.</a></p> <hr> <h2>Old posterity answer:</h2> <p>There's nothing native that allows you to natively use SVG paths in canvas. You must convert yourself or use a library to do it for you.</p> <p>I'd suggest looking in to canvg:</p> <p><a href="http://code.google.com/p/canvg/" rel="noreferrer">http://code.google.com/p/canvg/</a></p> <p><a href="http://canvg.googlecode.com/svn/trunk/examples/index.htm" rel="noreferrer">http://canvg.googlecode.com/svn/trunk/examples/index.htm</a></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. 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