Add Text
Canvas ဟာ ပံုဆြဲရံုသာမက စာေတြ ပါထည့္လို႕ရပါတယ္။ စာထည့္ဖုိ႕အတြက္ font family , size စတာေတြလိုပါတယ္။ ျပီးတဲ့ အခါမွာ fillText နဲ႕ စာ ကို canvas ထဲကို ထည့္ရပါတယ္။
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas</title>
<style>
canvas#myCanvas {border: 1px solid gray;}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//filled text
ctx.fillStyle = "red";
ctx.font = '40px "times new roman"'
ctx.fillText('Hello World',50,150);
</script>
</body>
</html>code ကေတာ့ ရွင္းရွင္းေလးပါ။ စာလံုး အနီေရာင္ သံုးတယ္။ font size က 40px ျဖစ္ျပီးေတာ့ font family ကေတာ့ times new roman ပါ။ ျပီးေတာ့ Hello World ဆိုတဲ့ စာလံုးကို x ၅၀ ၊ y ၁၅၀ တုိ႕မွာ ထည့္လိုက္ပါတယ္။
Figure 11-12
ထပ္ျပီးေတာ့ color မျဖည့္ပဲ stroke နဲ႕ စာထည့္ၾကည့္ရေအာင္။
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas</title>
<style>
canvas#myCanvas {border: 1px solid gray;}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//filled text
ctx.fillStyle = "red";
ctx.font = '40px "times new roman"'
ctx.fillText('Hello World',50,150);
//outline text
ctx.strokeStyle = 'blue';
ctx.font = '30px "arial"';
ctx.strokeText('Stroke',50,200);
</script>
</body>
</html>အဲဒီ အခါ browser မွာ ေအာက္ကလို ေပၚပါလိမ့္မယ္။
Figure 11-13
တကယ္လုိ႕ လက္ရိွ text မွာ stroke ထည့္ခ်င္ရင္ x နဲ႕ y postion ကို အတူတူေပးလိုက္ရင္ ရပါတယ္။
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas</title>
<style>
canvas#myCanvas {border: 1px solid gray;}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//filled text
ctx.fillStyle = "red";
ctx.font = '40px "times new roman"'
ctx.fillText('Hello World',50,150);
//outline text
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.strokeText('Hello World',50,150);
</script>
</body>
</html>အခု code မွာဆုိရင္ stroke width ကို 2 px ေပးထားပါတယ္။
Figure 11-14
တကယ္လုိ႕ bold , italic စတာေတြ ထည့္ခ်င္ရင္ေတာ့ font မွာ ထည့္လို႕ရပါတယ္။
ctx.font = 'italic bold 44px "Times New Roman"';textalign ထည့္မယ္ဆုိရင္ေတာ့
ctx.textAlign='center';ဆုိျပီး ထည့္လို႕ရပါတယ္။ textAlign ေတြကေတာ့ left,center , right တုိ႕ပဲ ျဖစ္ပါတယ္။