HTML5 Canvas: Text underline workaround

text-decoration : underline …… But what to do in case of Canvas text.

Recently I had to show some texts on canvas, requirement was it should be underlined. I started googling and did not find any solution for that as canvas does not support any such property. Now the only option was some work-around , I did it and would like to share it with you.

Disclaimer : I am not a javascript expert, just a beginner in the world of javascript. So, if you find any thing wrong or you have some suggestions write me at durgesh.priyaranjan@gmail.com or mention it in the comment section below.

What I had?

A html canvas:

<canvas id="myCanvas" width="578" height="200"></canvas>

Requirements:

a) Text to be displayed : “ScriptStock”
b) The font size should be 30pt
c) Text color should be blue
d) Text alignment can be any of the three : left, center,right
e) Font family should be Calibri.

What I did to display the text on canvas?

var canvas = document.getElementById("myCanvas");//get canvas element as js object
var context = canvas.getContext("2d");//get canvas context to play with it

//initialize the variables with the required data
var text = "ScriptStock";
var textAlign = "center";
var textColor = "blue";
var fontSize = "60pt";
var fontFamily = "Calibri";

//Set the position of the text on canvas
//I am setting it as center of the canvas. You can set as per your need.
var x = canvas.width / 2;
var y = canvas.height / 2;

//Set the canvas context properties
context.font = fontSize + " " + fontFamily;
context.textAlign = textAlign;
context.fillStyle = textColor;

//Display the text on canvas
context.fillText(text, x, y);

//Call the function to underline the text
//We need to pass some values to our function so that it can perform the necessary calculations.
textUnderline(context,text,x,y,textColor,fontSize,textAlign);

The utility function for underline:

var textUnderline = function(context, text, x, y, color, textSize, align){

  //Get the width of the text
  var textWidth =context.measureText(text).width;

  //var to store the starting position of text (X-axis)
  var startX;

  //var to store the starting position of text (Y-axis)
  // I have tried to set the position of the underline according 
  // to size of text. You can change as per your need
  var startY = y+(parseInt(textSize)/15);

  //var to store the end position of text (X-axis)
  var endX;

  //var to store the end position of text (Y-axis)
  //It should be the same as start position vertically. 
  var endY = startY;

  //To set the size line which is to be drawn as underline.
  //Its set as per the size of the text. Feel free to change as per need.
  var underlineHeight = parseInt(textSize)/15;

  //Because of the above calculation we might get the value less 
  //than 1 and then the underline will not be rendered. this is to make sure 
  //there is some value for line width.
  if(underlineHeight < 1){
    underlineHeight = 1;
  }

  context.beginPath();
  if(align == "center"){
    startX = x - (textWidth/2);
    endX = x + (textWidth/2);
  }else if(align == "right"){
    startX = x-textWidth;
    endX = x;
  }else{
    startX = x;
    endX = x + textWidth;
  }

  context.strokeStyle = color;
  context.lineWidth = underlineHeight;
  context.moveTo(startX,startY);
  context.lineTo(endX,endY);
  context.stroke();
}

You can play with the above implementation at JSFiddle.

Please let me know if you have any better idea for same.

Keep Visiting.

About these ads
Posted in Canvas, HTML, Javascript
3 comments on “HTML5 Canvas: Text underline workaround
  1. José says:

    First of all, thank you for a solution!
    Is it also applicable for multi-line texts? It would need a few changes wouldn’t it?

    • scriptstock says:

      Of-course José, it wont work for multiline texts in current format, as canvas directly doesn’t support line break feature. First you will need to wrap the text manually using and then you will have to apply it. If u need more help let me know, I will try to help you.

  2. Wow, marvelous weblog layout! How lengthy have you ever been blogging for?
    you made blogging glance easy. The whole glance of your site is fantastic, let
    alone the content material!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 271 other followers

%d bloggers like this: