Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ok, I think I understand your question now.</p> <p>You want to draw text a curved path...</p> <p>Good news/Bad news:</p> <p>Canvas <strong>cannot</strong> do this directly.</p> <p>However you <strong>can</strong> use Html SVG to do it.</p> <p>You can use a free program like Inkscape to design your logo.</p> <p>Then just save it in SVG format (myLogo.svg).</p> <p>Then you can load it into canvas like this:</p> <pre><code>var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var img=new Image(); img.onload=function(){ ctx.drawImage(img,0,0); } img.src="http://mySite.com/myLogo.svg"; </code></pre> <p>Here is a quick demo of the kind of SVG you can create to fit your needs.</p> <p>And here is a Fiddle: <a href="http://jsfiddle.net/m1erickson/v4EX3/" rel="nofollow">http://jsfiddle.net/m1erickson/v4EX3/</a></p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body{ background-color: ivory; } div{float:left;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;svg viewBox = "0 0 200 120"&gt; &lt;defs&gt; &lt;path id = "curvedPath" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/&gt; &lt;/defs&gt; &lt;g fill = "white"&gt; &lt;use x = "0" y = "0" xlink:href = "#curvedPath" stroke = "black" stroke-width="40" fill = "none"/&gt; &lt;text font-size = "20"&gt; &lt;textPath xlink:href = "#curvedPath"&gt; Use SVG to put your text on a curved path like this! &lt;/textPath&gt; &lt;/text&gt; &lt;/g&gt; &lt;/svg&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    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.
 

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