javascriptjqueryjcanvas

how to underline the text in jcanvas jquery, when we click on underline checkbox

I'm creating a type of editor, where when a user enters the text in the textarea and clicks on add text, his/her text gets added to the canvas. So, I need an option that if the user would like to underline that particular text, he can do that as well.Here I have added checkbox for the Underline option. I have done this using Jcanvas jquery.

My html code is: 

<input type="checkbox" id="Underline"  name="Underline" value="">Underline Add text<textarea id="add_text" ></textarea>   
<button onclick="addText()">add text</button>
<canvas id="maincanvas" width="500" height="400" style="background-color: #FFF;"> </canvas>

JavaScript code:

function addText(){
    var textvalue=document.getElementById("add_text");
    var $canvas = $("#maincanvas");

    $canvas.drawText({
      draggable: true,
      name: "demo",
      layer: true,
      fillStyle: "#000",
      x: 90,
      y: 10,
      text: textvalue,
    });
}
Solution

  • There are no 'text-decoration' or similar available in the text methods of the HTML Canvas Context. You could make it bold or oblique( via the fontStyle property) but underline is not available.

    But they exist a workaround, explained here.