How to map polygon in JavaScript

Question

Please can you help me? I´m looking for a way, how to map a polygon in canvas with image file (.png or .jpg) but I´m quite confused and I don´t know how to do it... Can you tell me or give a link to a tutorial how to map a polygons in canvas with images? Thank you very much

What do you mean by ["map"](http://en.wikipedia.org/wiki/Map_(mathematics))? Or do you mean clipping? — Bergi, Feb 18 '13 at 17:03
If you mean texure mapping: http://stackoverflow.com/questions/4774172/image-manipulation-and-texture-mapping-using-html5-canvas — Wolfgang Kuehn, Feb 18 '13 at 18:46
yeah, I read this thread... but I don´t know how to use this — Jan Kožušník, Feb 18 '13 at 19:31
Fill with the image like this? http://fabricjs.com/dynamic-patterns/ — kangax, Feb 18 '13 at 20:07
No. I do not want to fill it with image pattern. I want to fill it with one image which will transform as the polygon — Jan Kožušník, Feb 18 '13 at 20:17

score 0 · Accepted Answer · answered Feb 19 '13 at 21:13

Ok, I think I understand your question now.

You want to draw text a curved path...

Good news/Bad news:

Canvas cannot do this directly.

However you can use Html SVG to do it.

You can use a free program like Inkscape to design your logo.

Then just save it in SVG format (myLogo.svg).

Then you can load it into canvas like this:

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";

Here is a quick demo of the kind of SVG you can create to fit your needs.

And here is a Fiddle: http://jsfiddle.net/m1erickson/v4EX3/

<!doctype html>
<html>
<head>
    <style>
        body{ background-color: ivory; }
        div{float:left;}
    </style>
</head>

<body>
<div>
<svg viewBox = "0 0 200 120">
     <defs>
         <path id = "curvedPath" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
     </defs>
     <g fill = "white">
         <use x = "0" y = "0" xlink:href = "#curvedPath" stroke = "black" stroke-width="40" fill = "none"/>
         <text font-size = "20">
             <textPath xlink:href = "#curvedPath">
                Use SVG to put your text on a curved path like this!
            </textPath>
         </text>
     </g>
 </svg>
</div>
</body>
</html>

Oh, and isn´t there any way how to solve this problem with this: http://stackoverflow.com/questions/4774172/image-manipulation-and-texture-mapping-using-html5-canvas ? That I will make from a picture the triangles and I will draw them gradually and I will turn them how I want or something like this? Because the pictures will be about 900 so it might be quite difficult... — Jan Kožušník, Feb 19 '13 at 22:11
Laugh! I thought I was understanding you but now I'm lost as ever. OK, so go to http://raphaeljs.com/ and learn about using this great SVG library to create SVG objects. In particular, look at Raphael.getPointAtLength(path, length). With this method, you can define a path and place objects at specified lengths along that path. You can draw triangles along the path, rotate them, and more! Raphael is a great library, but your learning curve is going to be steep given what you want to do. Good Luck! — markE, Feb 20 '13 at 00:46

How to map polygon in JavaScript

1 Answers1