Drawing text

This is a simple recipe rendering text:

How to do it...

The recipe is as follows:

<html>

<head>
 
<title>A Simple Text</title>
<script>
  function init()
  {
    can  = document.getElementById("MyCanvasArea");

    ctx = can.getContext("2d");

    var X=Math.round(can.width/2);

    drawLine(X,10,X,390,2,'black','butt');

    drawMyText(X,50,'Sujata-An Architect & an Entrepreneur','center','top','blue');
    drawMyText(X,100,'Prashant-An MBA','left','middle','green');
    drawMyText(X,150,'Amit-An Engineer','right','bottom','red');
    drawMyText(X,200,'Sampada-An Engineer','start','alphabetic','orange');
    drawMyText(X,250,'Sukhada-A Classical Singer','end','hanging','aqua');
    drawMyText(X,300,'Kalyani-A Chartered Accountant','center','ideographic','magenta');
    ctx.direction="rtl";
    drawMyText(X,350,'Vivek-An IITian','start','alphabetic','navy');
  }
  function drawMyText(X,Y,message,align,baseline,color)
  {   

    ctx.beginPath();
    ctx.fillStyle=color;
    ctx.font='20pt Arial';

    ctx.textAlign=align;
    ctx.textBaseLine=baseline;
    ctx.fillText(message,X,Y);
    ctx.closePath();
  }
  function drawLine(xstart,ystart,xend,yend,width,color,cap)
  {
    ctx.beginPath();
    ctx.strokeStyle=color;  
    ctx.lineWidth=width;
    ctx.lineCap=cap;
    ctx.moveTo(xstart,ystart);
    ctx.lineTo(xend,yend);
    ctx.stroke();
    ctx.closePath();
  }
</script>
</head> 
<body onload="init()"> 

  <canvas id="MyCanvasArea" width ="800"  height="400" 
  style="border:2px solid black">

    Your browser doesn't currently support HTML5 Canvas.

  </canvas> 
</body> 
</html>

How it works...

The output demonstrates the textAlign property. The values for this property can be left, right, center, start, or end. The value start is the same as left if the direction of text is from left to right, and the text display starts from the coordinates specified. In this recipe, it starts from 400,100 and 400,200 for two different texts. Observe the last text. The text seems to end on the line; however, the property is set with the value start. This happens because of this statement:

ctx.direction="rtl";

The direction of text rendered on the canvas is changed from default to right-to-left, so the start of the text changes. By default the direction is inherited from the parent element. Otherwise, it can be set to left-to-right or right-to-left.

There's more...

Use the strokeText() method instead of fillText(). You will need to replace fillStyle() with strokeStyle().

Canvas Cookbook

By : Purushottam Joshi

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

Drawing text

How to do it...

How it works...

There's more...

Canvas Cookbook

By : Purushottam Joshi

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

Drawing text

How to do it...

How it works...

There's more...

Delete Bookmark