Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Canvas Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
Canvas Cookbook

Canvas Cookbook

By : Purushottam Joshi
close
close
Canvas Cookbook

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

With the growing popularity of HTML5 Canvas, this book offers tailored recipes to help you develop portable applications, presentations, and games. The recipes are simple yet creative and build on each other. At every step, the book inspires the reader to develop his/her own recipe. From basic to advanced, every aspect of Canvas API has been covered to guide readers to develop their own application, presentation, or game.
Table of Contents (11 chapters)
close
close
10
Index

Drawing text

This is a simple recipe rendering text:

Drawing 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().

Create a Note

Modal Close icon
You need to login to use this feature.
notes
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Delete Note

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY