Skip to content

Commit 7a7c7a5

Browse files
mustafadalgamustafadalga
committed
4. Drawing Texts on Canvas
1 parent f5c9148 commit 7a7c7a5

File tree

18 files changed

+359
-0
lines changed

18 files changed

+359
-0
lines changed

‎4/1/assets/css/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
canvas {
2+
border: 1px solid #000;
3+
display: block;
4+
width: 900px;
5+
height: 700px;
6+
margin: 0 auto;
7+
}

‎4/1/assets/js/script.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
window.onload = () => {
2+
let canvas = document.querySelector('canvas')
3+
let context = canvas.getContext('2d')
4+
5+
context.font = "45px Verdana";
6+
7+
let fText = "Fill Text on Canvas"
8+
//context.fillText(fText, 80, 100, 100);(text,x,y,width)
9+
context.fillText(fText, 80, 100);
10+
11+
12+
let sText = "Stroke Text on Canvas";
13+
context.strokeText(sText, 80, 200, 400);
14+
15+
}

‎4/1/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Canvas</title>
7+
<link rel="stylesheet" href="assets/css/style.css">
8+
</head>
9+
10+
<body>
11+
12+
<canvas width="900" height="700">
13+
This is fallback message for old browser.
14+
</canvas>
15+
16+
17+
</body>
18+
19+
</html>
20+
<script src="assets/js/script.js"></script>

‎4/2/assets/css/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
canvas {
2+
border: 1px solid #000;
3+
display: block;
4+
width: 900px;
5+
height: 700px;
6+
margin: 0 auto;
7+
}

‎4/2/assets/js/script.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
window.onload = () => {
2+
let canvas = document.querySelector('canvas')
3+
let context = canvas.getContext('2d')
4+
5+
let text = "This text will be styled";
6+
context.font = "normal 800 xx-large times";
7+
context.fillText(text, 100, 100);
8+
9+
context.font = "italic 400 48px monospace";
10+
context.strokeText(text, 100, 150);
11+
12+
13+
}

‎4/2/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Canvas</title>
7+
<link rel="stylesheet" href="assets/css/style.css">
8+
</head>
9+
10+
<body>
11+
12+
<canvas width="900" height="700">
13+
This is fallback message for old browser.
14+
</canvas>
15+
16+
17+
</body>
18+
19+
</html>
20+
<script src="assets/js/script.js"></script>

‎4/3/assets/css/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
canvas {
2+
border: 1px solid #000;
3+
display: block;
4+
width: 900px;
5+
height: 700px;
6+
margin: 0 auto;
7+
}

‎4/3/assets/js/script.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
window.onload = () => {
2+
let canvas = document.querySelector('canvas')
3+
let context = canvas.getContext('2d')
4+
5+
let text = "This text will be in 3D";
6+
7+
8+
/*
9+
context.font = "normal 600 54px monospace";
10+
11+
12+
context.fillStyle = "black";
13+
14+
15+
16+
context.fillText(text, 99, 299);
17+
18+
19+
context.fillText(text, 98, 298);
20+
21+
22+
context.fillText(text, 97, 297);
23+
24+
25+
context.fillText(text, 96, 296);
26+
27+
28+
29+
// Original Text
30+
context.fillStyle = "violet";
31+
context.fillText(text, 100, 300);
32+
33+
*/
34+
35+
draw3DText(text, 100, 300, "normal 600 54px monospace", "red", 5)
36+
37+
38+
function draw3DText(text, x, y, style, color, size) {
39+
context.font = style;
40+
context.fillStyle = "black";
41+
for (let i = 0; i < size; i++) {
42+
context.fillText(text, x - i, y - i);
43+
}
44+
context.fillStyle = color;
45+
context.fillText(text, x, y)
46+
47+
}
48+
49+
}

‎4/3/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Canvas</title>
7+
<link rel="stylesheet" href="assets/css/style.css">
8+
</head>
9+
10+
<body>
11+
12+
<canvas width="900" height="700">
13+
This is fallback message for old browser.
14+
</canvas>
15+
16+
17+
</body>
18+
19+
</html>
20+
<script src="assets/js/script.js"></script>

‎4/4/assets/css/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
canvas {
2+
border: 1px solid #000;
3+
display: block;
4+
width: 900px;
5+
height: 600px;
6+
margin: 0 auto;
7+
}

0 commit comments

Comments
 (0)