Drawing Text in Canvas Using Javascript

Submitted by GeePee on Wednesday, November 19, 2014 - 00:07.

Language

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.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

52 views