-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtesting2.html
118 lines (109 loc) · 3.99 KB
/
testing2.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
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: rgb(15 19 22);
padding: 1rem;
}
canvas {
width: 700px;
height: 425px;
margin: 0 1rem 0 0;
border-radius: 10px;
}
button {
background: linear-gradient(45deg, #ff6d1b, #e0417f);
font-size: 1.25rem;
padding: 0.75rem 1.5rem;
line-height: 1.5rem;
will-change: transform, filter;
margin: 0 0 1rem 0;
transition: all 0.15s ease-out;
cursor: pointer;
border-radius: 100px;
display: block;
display: block;
border: none;
color: white;
font-family: Inter, sans-serif;
filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3));
font-variation-settings: 'wght' 600;
perspective-origin: 0 0;
letter-spacing: 0;
}
button:hover {
transform: scale(1.04);
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<button id="download">Download Canvas</button>
<canvas id="canvas"></canvas>
</body>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = 1300;
canvas.height = 850;
const wrapText = function(ctx, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
let testLine = '';
let wordArray = [];
let totalLineHeight = 0;
for(var n = 0; n < words.length; n++) {
testLine += `${words[n]} `;
var metrics = ctx.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
wordArray.push([line, x, y]);
y += lineHeight;
totalLineHeight += lineHeight;
line = `${words[n]} `;
testLine = `${words[n]} `;
}
else {
line += `${words[n]} `;
}
if(n === words.length - 1) {
wordArray.push([line, x, y]);
}
}
return [ wordArray, totalLineHeight ];
}
// Add gradient
let grd = ctx.createLinearGradient(0, 853, 1352, 0);
grd.addColorStop(0, '#00a0ff');
grd.addColorStop(1, '#12cba6');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 1342, 853);
// Write text
ctx.fillStyle = 'white';
ctx.font = '95px Inter';
ctx.fillText('👍', 85, 700);
// More text
ctx.font = '700 95px Inter';
ctx.fillStyle = 'white';
let wrappedText = wrapText(ctx, "Download this Canvas", 85, 753, 1200, 100);
wrappedText[0].forEach(function(item) {
ctx.fillText(item[0], item[1], item[2] - wrappedText[1] - (200)); // 200 is height of emoji
})
// And more
ctx.font = '200 50px Inter';
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.fillText("HTML", 85, 553 - wrappedText[1] - 100); // 853 - 200 for emoji, -100 for line height of 1
document.getElementById('download').addEventListener('click', function(e) {
let canvasUrl = canvas.toDataURL("image/jpeg", 0.5);
console.log(canvasUrl);
const createEl = document.createElement('a');
createEl.href = canvasUrl;
createEl.download = "download-this-canvas";
createEl.click();
createEl.remove();
});
</script>
</html>