How To Draw Text In Html5 Canvas

This article will tell you how to draw fill/stroke text in Html5 canvas, it will also tell you how to set the text font, text color, text alignment, text baseline with examples.

Table of Contents

1. How To Draw Text & Set Text Properties In Html5 Canvas.

How to set the text font: Use the Html canvas cotext‘s font attribute.
```
ctx.font = "italic 30px sans-serif";
```

How to set the text alignment: Use the canvas context‘s textAlign attribute.
```
ctx.textAlign = 'center';
```
How to set the text baseline: Use the canvas context‘s textBaseline attribute.
```
ctx.textBaseline = ‘bottom’;
```
How to set text color: Use the canvas context‘s fillStyle attribute.
```
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'
```

How to draw fill-text with the above attributes: Use the canvas context‘s fillText(text, x, y) method.
```
ctx.fillText(inputText, 0, 0);
```
How to draw stroke-text with the above attributes: Use the canvas context‘s strokeText(text, x, y) method.
```
ctx.strokeText(inputText, 0, 100);
```

2. Draw Text On Html5 Canvas Example.

The demo video’s youtube URL is https://youtu.be/9aLV2of24tM.

In this example, you can input the text, text font info in the input text box, and select different text alignment and baseline from the related drop-down list to see the effect.
This example contains 2 source files, html5-canvas-draw-text-example.html, html5-canvas-draw-text-example.js.

html5-canvas-draw-text-example.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Draw Text In Html5 Canvas</title>
<script type="text/javascript" src="html5-canvas-draw-text-example.js" charset="utf-8"></script>
<style>
canvas{
  display:block;
  margin-top:10px;
}
</style>
</head>
<body>
<h3>How To Draw Text In Html5 Canvas.</h3>
<div style="display:block;margin-top: 10px;">
    <label>Input Text To Draw:</label>
    <input type="text" id="sourceText" value="Hello Html5 Canvas."/>
    <div>
    <label>Text Font:</label>
    <input type="text" id="textFont" value="italic 30px sans-serif"/>
    <label>Text Align:</label>
    <select id="textAlign">
      <option value="start">start</option>
      <option value="end">end</option>
      <option value="left">left</option>
      <option value="right">right</option>
      <option value="center">center</option>
    </select>
    <label>Text Baseline:</label>
    <select id="textBaseline">
      <option value="top">top</option>
      <option value="hanging">hanging</option>
      <option value="middle">middle</option>
      <option value="alphabetic">alphabetic</option>
      <option value="ideographic">ideographic</option>
      <option value="bottom">bottom</option>
    </select>
  </div>
  <div style="display:block;margin-top: 10px;">
      <input type="button" value="Draw Text" onclick="drawText('canvas1', 'sourceText', 'textFont', 'textAlign', 'textBaseline')" />
  </div>
    <canvas id="canvas1"></canvas>
</div>
</body>
</html>

html5-canvas-draw-text-example.js.

var canvasWidth = 600;
var canvasHeight = 300;


function drawText(canvasId, inputTextId, textFontId, textAlignId, textBaselineId){

  // Get the html canvas object.
    var canvas = document.getElementById(canvasId);
    
    if(canvas==null){
        alert("Can not find the html canvas element with element id " + canvasId);
        return false;
    }

  var inputTextBox = document.getElementById(inputTextId);
  if(inputTextBox==null){
        alert("Can not find the html input text element with element id " + inputTextId);
        return false;
    }
  var inputText = inputTextBox.value;


  var textFontBox = document.getElementById(textFontId);
  if(textFontBox==null){
        alert("Can not find the html input text element with element id " + textFontId);
        return false;
    }
  var textFont = textFontBox.value;

  var textAlignSelect = document.getElementById(textAlignId);
  if(textAlignSelect==null){
        alert("Can not find the html select drop-down element with element id " + textAlignId);
        return false;
    }
  // Get the drop-down list selected index.
  selectIndex = textAlignSelect.selectedIndex;
  // Get the selected drop-down option.
  textAlignOption = textAlignSelect.options[selectIndex]
  // Get the choosed option value.
  textAlign = textAlignOption.value;


  var textBaselineSelect = document.getElementById(textBaselineId);
  if(textBaselineSelect==null){
        alert("Can not find the html select drop-down element with element id " + textBaselineId);
        return false;
    }
    
  // Get the drop-down list selected index.
  selectIndex = textBaselineSelect.selectedIndex;
  // Get the selected drop-down option.
  textBaselineOption = textBaselineSelect.options[selectIndex]
  // Get the choosed option value.
  textBaseline = textBaselineOption.value;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  canvas.style.display = 'block';
  canvas.style.backgroundColor = 'yellow';

  ctx = canvas.getContext('2d');

  ctx.font = textFont;
  ctx.textAlign = textAlign;
  ctx.textBaseline = textBaseline;

  ctx.fillStyle = 'rgba(0, 255, 0, 0.9)';
  ctx.fillText(inputText, 0, 0);

  ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
  ctx.strokeText(inputText, 0, 100);

  var measureText = ctx.measureText(inputText);
  ctx.fillText('The text width is ' + parseInt(measureText.width), 0, 200);
}

1. How To Draw Text & Set Text Properties In Html5 Canvas.

2. Draw Text On Html5 Canvas Example.

Leave a Comment Cancel Reply