Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS - Text</title>
<script>
var can, ctx;

function init() {
 can = document.getElementById("kan1");
 if (can.getContext) {
  ctx = can.getContext('2d');
 
  //function loader
  drawLine();
  drawText();
 }
 else document.getElementById('kan11').innerHTML='Vaš browser ne podržava CANVAS tag!';
}

function drawLine() {
ctx.strokeStyle="orange";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
}

function drawText() {
 //text properties
 ctx.font='12px Verdana';
 ctx.fillStyle='Navy';
 
 ctx.textAlign="start"; 
 ctx.fillText("textAlign=start",150,60); 
 
 ctx.textAlign="end"; 
 ctx.fillText("textAlign=end",150,80); 
 
 ctx.textAlign="left"; 
 ctx.fillText("textAlign=left",150,100);
 
 ctx.textAlign="center"; 
 ctx.fillText("textAlign=center",150,120); 
 
 ctx.textAlign="right"; 
 ctx.fillText("textAlign=right",150,140);
}

window.onload=init;
</script>
</head>
<body>
 
Ponašanje <b>textAlign</b> svojstva.<br>

<canvas id="kan1" width="300" height="200" style="border:1px solid #DDDDDD;">
 <span id="kan11">Vaš browser ne podržava CANVAS element!</span>
</canvas>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/32textalign.html.