Vissza canvas témakörökhöz.

Canvas text szöveg

Ön böngészője, nem támogatja a HTML5 canvas vászoncímkét / rajzokat. Válasszon másik böngészőt!

Szöveg, alap megjelenéséhez.
Pozíciót, left=1; és top=8-ra állítsuk be.
fillText("Szöve",left,top)
<canvas id="szoveg" width="250" height="100" style="border:1px solid lime;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg = canvas.getContext("2d");
szoveg.fillText("Hello World",1,8);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét. 		strokeText("Szöve",left,top)
<canvas id="szoveg" width="250" height="100" style="border:1px solid lime;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg= canvas.getContext("2d");
szoveg.strokeText("Hello World",1,8); 
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.

Változtassuk meg, szöveg méretét 30px-re, stílusát Arial-ra.
Pozíciót nem módosítjuk, szöveg egy része lesz látható.
fillText("Szöve",left,top)
<canvas id="szoveg" width="250" height="100" style="border:1px solid lime;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Arial";
szoveg.fillText("Hello World",1,8);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét. 		strokeText("Szöve",left,top)
<canvas id="szoveg" width="250" height="100" style="border:1px solid lime;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg= canvas.getContext("2d");
szoveg.font = "30px Arial";
szoveg.strokeText("Hello World",1,8); 
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.

Pozíciót, left=1; és top=30-ra állítsuk be, szöveg olvasható lesz.
fillText("Szöve",left,top)
<canvas id="szoveg" width="250" height="100" style="border:1px solid lime;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Arial";
szoveg.fillText("Hello World",1,30);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét. 		strokeText("Szöve",left,top)
<canvas id="szoveg" width="250" height="100" style="border:1px solid lime;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg= canvas.getContext("2d");
szoveg.font = "30px Arial";
szoveg.strokeText("Hello World",1,30);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.

Szöveg pozíciónálása.

fillText("Szöve",left,top)
A left és top értéket, számokkal határozzuk meg.
<canvas id="szoveg" width="250" height="100" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Arial";
szoveg.fillText("Hello World",1,30); 
szoveg.font = "40px Arial";
szoveg.fillText("Hello World",45,80);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.
strokeText("Szöve",left,top)
A left és top értéket, számokkal határozzuk meg.
<canvas id="szoveg" width="250" height="100" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg");
var szoveg= canvas.getContext("2d");
szoveg.font = "30px Arial";
szoveg.strokeText("Hello World",1,30);
szoveg.font = "40px Arial";
szoveg.strokeText("Hello World",45,80); 
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.


A left és top értéket, canvas width és height tört részeivel határozzuk meg.
Szöveg kezdete, a canvas vászon átlóinak felezőpontjában van.
<canvas id="szoveg" width="240" height="140" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Comic Sans MS";
szoveg.fillStyle = "blue";
szoveg.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.


A left és top értéket, canvas width és height tört részeivel határozzuk meg.
Szöveg kezdete, a canvas vászon átlóinak felezőpontjában van.
<canvas id="szoveg" width="240" height="140" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg04");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Times New Roman";
szoveg.strokeStyle = "blue";
szoveg.strokeText("Hello World", canvas.width/2, canvas.height/2);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.


Meghatározunk szöveg igazitást, textAlign = "center";
A left és top értéket, canvas width/2 és height/2 értékkel határozzuk meg.
Szöveg közepe, a canvas vászon átlóinak felezőpontjában van.
<canvas id="szoveg" width="240" height="140" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Comic Sans MS";
szoveg.fillStyle = "blue";
szoveg.textAlign = "center";
szoveg.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.


Meghatározunk szöveg igazitást, textAlign = "center";
A left és top értéket, canvas width/2 és height/2 értékkel határozzuk meg.
Szöveg közepe, a canvas vászon átlóinak felezőpontjában van.
<canvas id="szoveg" width="240" height="140" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg04");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Times New Roman";
szoveg.strokeStyle = "blue";
szoveg.textAlign = "center";
szoveg.strokeText("Hello World", canvas.width/2, canvas.height/2);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.


Meghatározunk szöveg igazitást, textAlign = "right";
A left és top értéket, canvas width/2 és height/2 értékkel határozzuk meg.
Szöveg vége, a canvas vászon átlóinak felezőpontjában van.
<canvas id="szoveg" width="240" height="140" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Arial";
szoveg.fillStyle = "blue";
szoveg.textAlign = "right";
szoveg.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.


Meghatározunk szöveg igazitást, textAlign = "right";
A left és top értéket, canvas width/2 és height/2 értékkel határozzuk meg.
Szöveg vége, a canvas vászon átlóinak felezőpontjában van.
<canvas id="szoveg" width="240" height="140" style="border:2px solid red;">
Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>

<script>
var canvas = document.getElementById("szoveg04");
var szoveg = canvas.getContext("2d");
szoveg.font = "30px Times New Roman";
szoveg.strokeStyle = "blue";
szoveg.textAlign = "right";
szoveg.strokeText("Hello World", canvas.width/2, canvas.height/2);
</script>
Ön böngészője, nem támogatja a HTML5 vászoncímkét.