Drawing Text in Canvas Using Javascript

Submitted by:

Admin

Language:

JavaScript

This project will teach you how to draw text in canvas using javascript. Let's see the parameters that the filltext method and stroketext method intake.



context.fillText('This is the text!', 20, 60);


context.strokeText('This is the text!', 20, 60);

The first parameter is the string of text, second is the x position, and the third is the y position. You can also maximum width. It is optional.
We can also modify the properties of the text. Here's the example:



context.font = "italic bold 32px Tahoma, sans serif";

This is the full code for reference.



<!DOCTYPE html>


<html>


<head>


<style type="text/css">


#box{


width:500px;


height:300px;


background:#fff;


}


</style>


<script type="text/javascript">


function draw_text (){


var context = document.getElementById('box').getContext('2d');


context.fillStyle = "#71C0F5";


context.font = "italic bold 32px Tahoma, sans serif";


context.fillText('This is the text!', 20, 60); //First Parameter is the string of text, x position, y position


context.textAlign = 'start';//it could be start, end, left, right, center


context.textBaseline = 'hanging'; // it could be top, middle, bottom, hanging, alphabetic, ideographic


context.lineWidth = 2;//thickness of stroke


context.strokeText('This is the text!', 20, 60);


}


window.onload = draw_text;


</script>


<title>Drawing Text on Canvas</title>


</head>


<body>


<canvas id="box"></canvas>


</body>


</html>

Hope you learn from this.

Download Code

Develop With ME

Drawing Text in Canvas Using Javascript