1

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,
    });
}
Manoj Kushwaha
  • 114
  • 12
  • **See Also**: [Is it possible to draw text decoration (underline) with HTML5 Canvas Text API?](https://stackoverflow.com/q/4627133/1366033) for Vanilla JS – KyleMit Nov 19 '20 at 21:57

1 Answers1

0

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.

Nhysi
  • 38
  • 7