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.

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

  1. How to set the text font: Use the Html canvas cotext‘s font attribute.
    ctx.font = "italic 30px sans-serif";
  2. How to set the text alignment: Use the canvas context‘s textAlign attribute.
    ctx.textAlign = 'center';
  3. How to set the text baseline: Use the canvas context‘s textBaseline attribute.

    ctx.textBaseline = ‘bottom’;
  4. How to set text color: Use the canvas context‘s fillStyle attribute.
    ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'
  5. How to draw fill-text with the above attributes: Use the canvas context‘s fillText(text, x, y) method.
    ctx.fillText(inputText, 0, 0);
  6. 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.

  1. The demo video’s youtube URL is https://youtu.be/9aLV2of24tM.
  2. 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.
  3. This example contains 2 source files, html5-canvas-draw-text-example.html, html5-canvas-draw-text-example.js.
  4. 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>
  5. 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);
    }

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clicky