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