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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE html>
<html>
<head>
<title>Inkscape Output</title>
</head>
<body>
<canvas id='canvas' width='1000' height='1000'></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
// #webslicer-layer
// #slicerect1
ctx.beginPath();
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.lineWidth = 1.119272;
ctx.rect(651.308900, 353.926610, 248.691120, 201.498110);
ctx.fill();
// #layer2
// #c1
ctx.beginPath();
ctx.fillStyle = 'rgb(0, 0, 128)';
ctx.globalAlpha = 1.0;
ctx.arc(150.000000, 450.000000, 50.000000, 0.000000, 6.28318531, 1);
ctx.fill();
// #c2
ctx.beginPath();
ctx.strokeStyle = 'rgb(255, 0, 0)';
ctx.lineWidth = 16.000000;
ctx.moveTo(400.000000, 400.000000);
ctx.bezierCurveTo(455.228475, 400.000000, 500.000000, 422.385763, 500.000000, 450.000000);
ctx.bezierCurveTo(500.000000, 477.614237, 455.228475, 500.000000, 400.000000, 500.000000);
ctx.bezierCurveTo(344.771525, 500.000000, 300.000000, 477.614237, 300.000000, 450.000000);
ctx.bezierCurveTo(300.000000, 422.385763, 344.771525, 400.000000, 400.000000, 400.000000);
ctx.stroke();
// #c3
ctx.beginPath();
ctx.fillStyle = 'rgb(255, 255, 0)';
ctx.strokeStyle = 'rgb(0, 128, 0)';
ctx.lineWidth = 16.000000;
ctx.moveTo(783.086350, 477.823810);
ctx.bezierCurveTo(758.815382, 495.943059, 713.857171, 504.107039, 671.987870, 497.998230);
ctx.bezierCurveTo(630.118574, 491.889420, 600.997311, 472.917108, 600.024860, 451.114800);
ctx.bezierCurveTo(599.052409, 429.312488, 626.453123, 409.709909, 667.736130, 402.673890);
ctx.bezierCurveTo(709.019129, 395.637872, 754.660551, 402.791598, 780.522930, 420.351820);
ctx.lineTo(700.000000, 450.000000);
ctx.closePath();
ctx.fill();
ctx.stroke();
// #p1
ctx.beginPath();
ctx.strokeStyle = 'rgb(0, 0, 0)';
ctx.lineWidth = 10.000000;
ctx.moveTo(100.000000, 600.000000);
ctx.lineTo(200.000000, 700.000000);
ctx.lineTo(300.000000, 600.000000);
ctx.lineTo(400.000000, 700.000000);
ctx.stroke();
// #p2
ctx.beginPath();
ctx.strokeStyle = 'rgb(0, 0, 0)';
ctx.lineWidth = 10.000000;
ctx.moveTo(500.000000, 600.000000);
ctx.bezierCurveTo(500.000000, 600.000000, 500.000000, 700.000000, 600.000000, 700.000000);
ctx.bezierCurveTo(700.000000, 700.000000, 600.000000, 600.000000, 700.000000, 600.000000);
ctx.bezierCurveTo(800.000000, 600.000000, 800.000000, 700.000000, 800.000000, 700.000000);
ctx.stroke();
// #s1
ctx.beginPath();
ctx.fillStyle = 'rgb(255, 255, 0)';
ctx.strokeStyle = 'rgb(0, 128, 0)';
ctx.lineWidth = 10.000000;
ctx.moveTo(244.833200, 889.140050);
ctx.lineTo(199.494330, 881.005590);
ctx.lineTo(167.090050, 913.743120);
ctx.lineTo(160.815900, 868.109600);
ctx.lineTo(119.667180, 847.407760);
ctx.lineTo(161.128420, 827.339150);
ctx.lineTo(168.101390, 781.807180);
ctx.lineTo(200.000000, 815.037620);
ctx.lineTo(245.458240, 807.599150);
ctx.lineTo(223.711430, 848.205300);
ctx.closePath();
ctx.fill();
ctx.stroke();
// #layer1
// #t1
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.font = "14.66666698px sans-serif";
ctx.fillText("Hello World", 100.000000, 100.000000);
// #t2
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.font = "14.66666698px sans-serif";
ctx.fillText("UPPER", 200.000000, 100.000000);
// #t3
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.font = "10.58333302px sans-serif";
ctx.fillText("Multi line", 300.000000, 100.000000);
ctx.fillText("text", 300.000000, 118.333340);
ctx.fillText("FOO", 300.000000, 136.666670);
// #t5
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, 445.710000, -129.648000);
// #text3762
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.font = "10.58333302px sans-serif";
ctx.fillText("Grouped", 54.289616, 229.648070);
// #text3766
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.font = "14.66666698px sans-serif";
ctx.fillText("text", 54.289619, 259.648070);
ctx.restore();
// #r1
ctx.beginPath();
ctx.fillStyle = 'rgb(0, 0, 128)';
ctx.rect(100.000000, 200.000000, 100.000000, 100.000000);
ctx.fill();
// #r2
ctx.beginPath();
ctx.strokeStyle = 'rgb(255, 0, 0)';
ctx.lineWidth = 16.000000;
ctx.rect(300.000000, 200.000000, 200.000000, 100.000000);
ctx.stroke();
// #r3
ctx.beginPath();
ctx.fillStyle = 'rgb(255, 255, 0)';
ctx.strokeStyle = 'rgb(0, 128, 0)';
ctx.lineWidth = 16.000000;
ctx.moveTo(600.000000, 238.950798);
ctx.lineTo(600.000000, 261.049202);
ctx.quadraticCurveTo(600.000000, 300.000000, 644.943226, 300.000000);
ctx.lineTo(755.056774, 300.000000);
ctx.quadraticCurveTo(800.000000, 300.000000, 800.000000, 261.049202);
ctx.lineTo(800.000000, 238.950798);
ctx.quadraticCurveTo(800.000000, 200.000000, 755.056774, 200.000000);
ctx.lineTo(644.943226, 200.000000);
ctx.quadraticCurveTo(600.000000, 200.000000, 600.000000, 238.950798);
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
|
