├── example.png
├── LICENSE
├── README.md
├── index.html
└── ctxtextpath.js


/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Viglino/Canvas-TextPath/HEAD/example.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Jean-Marc Viglino
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Canvas-TextPath](https://github.com/Viglino/Canvas-TextPath/)
 2 | 
 3 | Adds extra functionality to the CanvasRenderingContext2D to draw text along a path.
 4 | 
 5 | ![Text along the path](example.png?raw=true "Result")
 6 | 
 7 | Check out the [demo!](https://viglino.github.io/Canvas-TextPath/)
 8 | 
 9 | ## How it runs?
10 | 
11 | As SVG does support text along paths, canvas doesn't have such native support. 
12 | This contribution tries to fill the lack and gives you a `textPath` function to use with a CanvasRenderingContext2D.
13 | The method writes one character at a time rotated and scaled according to the path.
14 | 
15 | NOTE: this extends the CanvasRenderingContext2D prototype. 
16 | - It adds a `textPath` function to draw text along a path (as an Array of coordinates).
17 | - It adds `textOverflow`, `textJustify` and `textStrokeMin` properties to CanvasRenderingContext2D.
18 | 
19 | It support native options include text alignment (left, center and right) and baseline positionning.
20 | Stroke and fill is done in one pass for performance purpose.
21 | 
22 | 
23 | ## Usage
24 | 
25 | Include the following files in your page:
26 | ```html
27 | <script type="text/javascript" src="https://cdn.rawgit.com/Viglino/Canvas-TextPath/master/ctxtextpath.js"></script> 
28 | ```
29 | Add a canvas on your page
30 | ```html
31 | <canvas id="myCanvas" width="200" height="100"></canvas> 
32 | ```
33 | Then begin to draw in the canvas
34 | ```javascript
35 | window.onload = function() {
36 |   var c = document.getElementById("myCanvas");
37 |   var ctx = c.getContext("2d");
38 |   
39 |   // Draw support path
40 |   ctx.strokeStyle = "red";
41 |   ctx.lineWidth=2;
42 |   ctx.moveTo(10,60);
43 |   ctx.lineTo(100,40);
44 |   ctx.lineTo(190,60);
45 |   ctx.stroke();
46 | 
47 |   // Render text
48 |   ctx.font = "24px Arial";
49 |   ctx.textAlign = "center";
50 |   ctx.textBaseline = "middle";
51 |   ctx.strokeStyle =  "white";
52 |   ctx.lineWidth = 3;
53 |   ctx.textPath ("Hello world", [10,60, 100,40, 190,60]);
54 |  }
55 | </script>
56 | ```
57 | The path is an Array of coordinates [x1,y1, x2, y2, etc.]
58 | 
59 | ![Text along the path](example.png?raw=true "Result")
60 | 
61 | ## Properties
62 | 
63 | Extra properties are added to the CanvasRenderingContext2D.
64 | 
65 | * `textOverflow` string: specifies what happens if text overflows the path, default "" (means hidden). Possible values are 'visible' to show the text, 'ellipsis' to show "..." or a string that will be displayed at the end of the truncated text. Use an empy string to hide overflow content.
66 | * `textJustify` boolean: true for justifying text, default false. When false, it takes the textAlign propertie to align text.
67 | * `textStrokeMin` number: the minimum size (in pixel) of the path underneath the text is not displayed.
68 | 
69 | If you specify a `lineWitdth` less than 0.1 no stroke is drawn. Use a `fillStyle` as 'transparent' to not fill the text
70 | 
71 | ```javascript
72 |   ctx.textOverflow = "ellipsis";
73 |   ctx.textJustify = true;
74 |   ctx.textStrokeMin = 40;
75 |   ctx.textPath ("Hello world", [10,60, 100,40, 190,60]);
76 | ```
77 | 
78 | 
79 | ## License
80 | 
81 | [MIT License](https://github.com/Viglino/Canvas-TextPath/blob/master/LICENSE)
82 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Canvas textPath</title>
  5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6 | 
  7 | 	<meta name="description" content="Renders text along a path in a Canvas" />
  8 | 	<meta name="keywords" content="canvas, context, textpath, along" />
  9 | 
 10 | 	<script type="text/javascript" src="ctxtextpath.js"></script>
 11 | 
 12 | 	<style>
 13 | 		body { color:#369; } 
 14 | 		p { font-size: 1.5em; }
 15 | 		ol { margin:12px 0.5em;}
 16 | 		li { font-size: 1.5em; line-height: 60px; text-align:right; }
 17 | 		input { border: 10px solid #eee; color: #800; font-size: 1em; padding: 0 0.5em; width: 20em; }
 18 | 		canvas { border:10px solid #800; }
 19 | 	</style>
 20 | </head>
 21 | <body>
 22 | 	<a href="https://github.com/Viglino/Canvas-TextPath"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
 23 | 	<h1>Canvas textPath</h1>
 24 | 	<p>
 25 | 		To render text along a path in a Canvas.<br/>
 26 | 		It adds extra functionality to the CanvasRenderingContext2D by extending its prototype.
 27 | 		<br/>
 28 | 		Text: <input type="text" placeholder="Text to render..." value="Text along the path" onkeyup="drawtext(this.value)" />
 29 | 	</p>
 30 | 	<ol style="float:left">
 31 | 		<li>align left</li>
 32 | 		<li>align center</li>
 33 | 		<li>align right</li>
 34 | 		<li>justify</li>
 35 | 		<li>overflow hidden</li>
 36 | 		<li>overflow ellipsis</li>
 37 | 		<li>overflow visible</li>
 38 | 	</ol>
 39 | 	<canvas id="myCanvas" width=500 height=500></canvas> 
 40 | 
 41 | <script type="text/javascript">
 42 | 	var thePath = [80,20, 180,70, 300,50, 400,80];
 43 | 	var shortPath = [180,50, 200,60, 250,50, 300,70];
 44 | 
 45 | 	var canvas = document.getElementById("myCanvas");
 46 | 	var ctx = canvas.getContext("2d");
 47 | 
 48 | 	function drawPath(path)
 49 | 	{	ctx.save();
 50 | 		ctx.strokeStyle = "#aaa";
 51 | 		ctx.lineWidth = 1;
 52 | 		ctx.beginPath();
 53 | 		ctx.moveTo(path[0],path[1]);
 54 | 		for (var i=2; i<path.length; i+=2)
 55 | 		{	ctx.lineTo(path[i],path[i+1]);
 56 | 		}
 57 | 		ctx.stroke();
 58 | 		ctx.restore();
 59 | 	}
 60 |   
 61 | 	function drawtext(theText)
 62 | 	{	ctx.clearRect(0,0,1000,1000);
 63 | 
 64 | 		// Draw text along the path
 65 | 		ctx.font="20px Georgia";
 66 | 		// Use classic base line middle|top|bottom|alphabetic|hanging
 67 | 		ctx.textBaseline = "middle";
 68 | 		// fillStyle, for none: use "transparent"
 69 | 		ctx.fillStyle = "#a00";
 70 | 		// Text outline, for none: use lineWidth less than 0.1 (0 is not allowed)
 71 | 		ctx.lineWidth = 3;
 72 | 		ctx.strokeStyle = "yellow";
 73 |   
 74 | 		ctx.save();
 75 | 
 76 | 			drawPath(thePath);
 77 | 			ctx.textAlign = "left";
 78 | 			ctx.textPath(theText, thePath);
 79 |   
 80 | 			ctx.translate(0,60);
 81 | 			drawPath(thePath);
 82 | 			ctx.textAlign = "center";
 83 | 			ctx.textPath(theText, thePath);
 84 |   
 85 | 			ctx.translate(0,60);
 86 | 			drawPath(thePath);
 87 | 			ctx.textAlign = "right";
 88 | 			ctx.textPath(theText, thePath);
 89 | 
 90 | 			ctx.translate(0,60);
 91 | 			drawPath(thePath);
 92 | 			ctx.textJustify = true;
 93 | 
 94 | 		ctx.textPath(theText, thePath);
 95 | 
 96 | 		// Reset
 97 | 		ctx.restore();
 98 | 		ctx.save();
 99 | 			ctx.textAlign = "center";
100 | 
101 | 			ctx.translate(0,240);
102 | 			drawPath(shortPath);
103 | 			ctx.textPath(theText, shortPath);
104 |   
105 | 			ctx.translate(0,60);
106 | 			drawPath(shortPath);
107 | 			ctx.textOverflow = "ellipsis";
108 | 			ctx.textPath(theText, shortPath);
109 |   
110 | 			ctx.translate(0,60);
111 | 			drawPath(shortPath);
112 | 			ctx.textOverflow = "visible";
113 | 			ctx.textPath(theText, shortPath);
114 | 
115 | 		ctx.restore();
116 | 	}
117 | 
118 | 	drawtext("Text along the path");
119 |   
120 | </script>
121 | </body>


--------------------------------------------------------------------------------
/ctxtextpath.js:
--------------------------------------------------------------------------------
  1 | /** Render text along a path in a Canvas
  2 | *	Adds extra functionality to the CanvasRenderingContext2D by extending its prototype.
  3 | *	Extent the global object with options:
  4 | *		- textOverflow {undefined|visible|ellipsis|string} the text to use on overflow, default "" (hidden)
  5 | *		- textJustify {undefined|boolean} used to justify text (otherwise use textAlign), default false
  6 | *		- textStrokeMin {undefined|number} the min length (in pixel) for the support path to draw the text upon, default 0
  7 | * 
  8 | * @param {string} text the text to render
  9 | * @param {Array<Number>} path an array of coordinates as support for the text (ie. [x1,y1,x2,y2,...]
 10 | */
 11 | (function()
 12 | {
 13 | /* Usefull function */
 14 | function dist2D(x1,y1,x2,y2)
 15 | {	var dx = x2-x1;
 16 | 	var dy = y2-y1;
 17 | 	return Math.sqrt(dx*dx+dy*dy);
 18 | }
 19 | 
 20 | /* Add new properties on CanvasRenderingContext2D */
 21 | CanvasRenderingContext2D.prototype.textOverflow = "";
 22 | CanvasRenderingContext2D.prototype.textJustify = false;
 23 | CanvasRenderingContext2D.prototype.textStrokeMin = 0;
 24 | 
 25 | var state = [];
 26 | var save = CanvasRenderingContext2D.prototype.save;
 27 | CanvasRenderingContext2D.prototype.save = function()
 28 | {	state.push(
 29 | 		{	textOverflow: this.textOverflow, 
 30 | 			textJustify: this.textJustify, 
 31 | 			textStrokeMin: this.textStrokeMin, 
 32 | 		});
 33 | 	save.call(this);
 34 | }
 35 | 
 36 | var restore = CanvasRenderingContext2D.prototype.restore;
 37 | CanvasRenderingContext2D.prototype.restore = function()
 38 | {	restore.call(this);
 39 | 	var s = state.pop();
 40 | 	this.textOverflow = s.textOverflow;
 41 | 	this.textJustify = s.textJustify;
 42 | 	this.textStrokeMin = s.textStrokeMin;
 43 | }
 44 | 
 45 | /* textPath function */
 46 | CanvasRenderingContext2D.prototype.textPath = function (text, path)
 47 | {	// Helper to get a point on the path, starting at dl 
 48 | 	// (return x, y and the angle on the path)
 49 | 	var di, dpos=0;
 50 | 	var pos=2;
 51 | 	function pointAt(dl)
 52 | 	{	if (!di || dpos+di<dl)
 53 | 		{ for (; pos<path.length; )
 54 | 			{	di = dist2D(path[pos-2],path[pos-1], path[pos],path[pos+1]);
 55 | 				if (dpos+di>dl) break;
 56 | 				pos += 2;
 57 | 				if (pos>=path.length) break;
 58 | 				dpos += di;
 59 | 			}
 60 | 		}
 61 |    
 62 | 		var x, y, dt = dl-dpos;
 63 | 		if (pos>=path.length) 
 64 | 		{	pos = path.length-2;
 65 | 		}
 66 | 
 67 | 		if (!dt) 
 68 | 		{	x = path[pos-2];
 69 | 			y = path[pos-1];
 70 | 		}
 71 | 		else
 72 | 		{	x = path[pos-2]+ (path[pos]-path[pos-2])*dt/di;
 73 | 			y = path[pos-1]+ (path[pos+1]-path[pos-1])*dt/di;
 74 | 		}
 75 | 		return [x, y, Math.atan2(path[pos+1]-path[pos-1], path[pos]-path[pos-2])];
 76 | 	}
 77 | 
 78 | 	var letterPadding = this.measureText(" ").width *0.25;
 79 |   
 80 | 	// Calculate length
 81 | 	var d = 0;
 82 | 	for (var i=2; i<path.length; i+=2)
 83 | 	{	d += dist2D(path[i-2],path[i-1],path[i],path[i+1])
 84 | 	}
 85 | 	if (d < this.minWidth) return;
 86 | 	var nbspace = text.split(" ").length -1;
 87 | 
 88 | 	// Remove char for overflow
 89 | 	if (this.textOverflow != "visible")
 90 | 	{	if (d < this.measureText(text).width + (text.length-1 + nbspace) * letterPadding)
 91 | 		{	var overflow = (this.textOverflow=="ellipsis") ? '\u2026' : this.textOverflow||"";
 92 | 			var dt = overflow.length-1;
 93 | 			do
 94 | 			{	if (text[text.length-1]===" ") nbspace--;
 95 | 				text = text.slice(0,-1);
 96 | 			} while (text && d < this.measureText(text+overflow).width + (text.length + dt + nbspace) * letterPadding)
 97 | 			text += overflow;
 98 | 		}
 99 | 	}
100 | 
101 | 	// Calculate start point
102 | 	var start = 0;
103 | 	switch (this.textJustify || this.textAlign)
104 | 	{	case true: // justify
105 | 		case "center":
106 | 		case "end":
107 | 		case "right":
108 | 		{	// Justify
109 | 			if (this.textJustify) 
110 | 			{	start = 0;
111 | 				letterPadding = (d - this.measureText(text).width) / (text.length-1 + nbspace);
112 | 			}
113 | 			// Text align
114 | 			else
115 | 			{	start = d - this.measureText(text).width - (text.length + nbspace) * letterPadding;
116 | 				if (this.textAlign == "center") start /= 2;
117 | 			}
118 | 			break;
119 | 		}
120 | 		// left
121 | 		default: break;
122 | 	}
123 |   
124 | 	// Do rendering
125 | 	for (var t=0; t<text.length; t++)
126 | 	{	var letter = text[t];
127 | 		var wl = this.measureText(letter).width;
128 |     
129 | 		var p = pointAt(start+wl/2);
130 | 
131 | 		this.save();
132 | 		this.textAlign = "center";
133 | 		this.translate(p[0], p[1]);
134 | 		this.rotate(p[2]);
135 | 		if (this.lineWidth>0.1) this.strokeText(letter,0,0);
136 | 		this.fillText(letter,0,0);
137 | 		this.restore();
138 | 		start += wl+letterPadding*(letter==" "?2:1);
139 | 	}
140 |   
141 | };
142 | 
143 | })();


--------------------------------------------------------------------------------