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.

‹ CSS: Tansform and Transition – Get Started

Understanding Javascript “this” ›

Posted in Canvas, HTML, Javascript