Easy jQquery Plugins

Submit plugin Contact ☰

HTML5 Canvas fonts and texts

Font styling is a major requirement for web developers and designers to make the page visually appealing. Let us play and learn some font styling tips in a canvas element.


                <!DOCTYPE HTML>
    <html>
      <head>
      <style>
          body {
            margin: 0px;
            padding: 0px;
          }
            #myCanvas {
            border:1px solid #000000;
            }
      </style>
      </head>
      <body>
        <canvas id="myCanvas" width="400" height="350"></canvas>
        <script>
                var canvas = document.getElementById('myCanvas');
                var context = canvas.getContext('2d');

                //font styles
                context.font = 'bold 20pt comic sans ms';
                context.fillText('Font Styling', 120, 50);

                //font colors
                context.font = '20pt Calibri';
                context.fillStyle = '#30cd74';
                context.fillText('Font Color', 140, 100);

                //font stroking
                context.font = '50pt Calibri';
                context.lineWidth = 3;
                context.strokeStyle = '#34495e';
                context.strokeText('Font stroke', 50, 170);

                //aligning text horizontally
                context.font = '10pt Calibri';
                context.textAlign = 'left';
                context.fillStyle = 'green';
                context.fillText('text aligning left', 170, 200);
                context.font = '10pt Calibri';
                context.textAlign = 'center';
                context.fillStyle = 'green';
                context.fillText('text aligning center', 170, 220);
                context.font = '10pt Calibri';
                context.textAlign = 'right';
                context.fillStyle = 'green';
                context.fillText('text aligning right', 170, 240);

                //a line for understanding of textAlign property
                context.beginPath();
                context.moveTo(170, 180);
                context.lineTo(170, 250);
                context.lineWidth = 1;
                context.stroke();

                //aligning text vertically
                context.font = '20pt Calibri';
                context.textAlign = 'center';
                context.textBaseline = 'top';
                context.fillStyle = 'green';
                context.fillText('top', 150, 280);
                context.font = '20pt Calibri';
                context.textAlign = 'left';
                context.textBaseline = 'middle';
                context.fillStyle = 'green';
                context.fillText('middle', 210, 280);
                context.font = '20pt Calibri';
                context.textAlign = 'center';
                context.textBaseline = 'bottom';
                context.fillStyle = 'green';
                context.fillText('bottom', 190, 280);

                //a line for understanding of textBaseline property
                context.beginPath();
                context.moveTo(100, 280);
                context.lineTo(240, 280);
                context.lineWidth = 1;
                context.stroke();
        </script>
      </body>
    </html>

The above code will produce the following result

Explanation

Font style

Text can be rendered in a canvas using the fillText() method and font property can be set for styling purpose.
The style available for font are normal, italic, or bold. By default font type is normal.

Font color

fillStyle property can be used to the font color in a cavas.

Font stroke

strokeText() method can be used to create a text stroke and to set the color of that stroke strokeStyle property of canvas context is used.

Horizontal alignment

To align a text horizontally with respect to a virtual vertical line at the point we created the text textAlign propertty can be used. Different values that can be assigned to this property are start, end, left, center or right.

Vertical alignment

To align a text vertically with respect to a virtual horizontal line at the point we created the text textBaseline propertty can be used. Different values that can be assigned to this property are top, middle, bottom, alphabetic, hanging, or ideographic.

Contact Submit plugin