---

Search posts under HTML5:

---

Canvas Texts in HTML5

How to create text on canvas using HTML5

Canvas Text

canvas  text is used to fill the text in the canvas, The syntax of the text is ctx.filltext().

<canvas id="myCanvas" width="600" height="300"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.font = 'bold 18pt Calibri';
        context.fillText('TECHFUNDA', 10, 200);
</script>

In the above code snippet we have defined the canvas text, We have context.filltext() to fill the text name and(x,y) positions in the canvas and context.font as bold defined the text as bold which is used as style and 18pt calibri is used as fontsize of the text

output

\

TextColor

It is used to add the color to the text

<canvas id="myCanvas" width="600" height="300"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.font = '23pt Calibri';
        context.fillStyle = 'green';
        context.fillText('TECHFUNDA', 10, 20);
    </script>

Textcolor

In the above code snippet we have defined the canvas text, We have context.filltext() to fill the text name and(x,y) positions in the canvas and context.fillstyle as color which is used as style

output

Stroke text

It is used to add the stroke style of the text and we need to add the strokestyle and stroke rect to ad the style

<canvas id="myCanvas" width="600" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
       

        context.font = '30pt Calibri';
        context.lineWidth = 1;
        
        context.strokeStyle = 'orange';
        context.strokeText('TECHFUNDA', 25, 50);
    </script>

Stroketext()

In the above code snippet we have defined the canvas  stroke text, We have context.Stroketext() to write the text name and(x,y) positions in the canvas and context.strokestyle as color which is used as style and font is used to increase and decrease the fontsize and line width is used to increase the width of the line

output

Text-align

It is used to align the text to center to right, left and center

<canvas id="myCanvas" width="600" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
       

        context.font = '30pt Calibri'; 
        context.strokeStyle = 'orange';
        context.textAlign = "left";
        context.strokeText('TECHFUNDA', 250, 100);
    </script>

Textalign

In the above code snippet we have  defined the textalign property to align the text to left with the orange color of size as  30 pt calibri with the value as TECHFUNDA and (x,y) values as (250,100)

output

Text baseline

It is used to align the text horizontally

 <canvas id="myCanvas" width="600" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.font = '30pt Calibri'; 
        context.strokeStyle = 'orange';
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeText('TECHFUNDA', 250, 100);
    </script>

Textbaseline

In the above code snippet we have  defined textbaseline which is used to align the text middle in horizontal line and the textalign property to align the text to left with the orange color of size as  30 pt calibri with the value as TECHFUNDA and (x,y) values as (250,100) 

output

TextMetrics

It is used to find the px width of the text

 <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x = canvas.width / 2;
        var y = canvas.height / 2 - 10;
        var text = 'TECHFUNDA';

        context.font = '20pt Calibri';
        context.textAlign = 'left';
        context.fillStyle = 'orange';
        context.fillText(text, x, y);

        
        var metrics = context.measureText(text);
        var width = metrics.width;

        context.font = '15pt Calibri';
        context.textAlign = 'right';
        context.fillStyle = 'green';
        context.fillText('(' + width + 'px wide)', x, y + 40);
    </script>

TextMetrices

In the above code snippet we have defined the textmetrices which is used to find the px width of the text we have declared two functions of Techfunda as

• context.font = '20pt Calibri'; - It is used to increase the size 
• context.textAlign = 'left'; - It aligns the text to the left
• context.fillStyle = 'orange'; - Color as orange 
• context.fillText(text, x, y); - It defines the text as techfunda and x and y values
• context.font = '15pt Calibri'; - It defines the size of thetext
• context.textAlign = 'right'; - It aligns the text to the right
• context.fillStyle = 'green'; - It fills the color with the green
• context.fillText('(' + width + 'px wide)', x, y + 40); - It fills the width and px width x and y values