To change font when drawing text using HTML5 Canvas,
we can use the font property and the fillText()
method from the canvas context.
The font property accepts a string containing
the font style, size, and family, delimited by spaces.
The style can be normal, italic, or bold.
The font style is defaulted to normal.
fillText() method, which requires a string and an x and y position.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!-- ww w. j a v a2s . c om-->
context.font = 'italic 40pt Calibri';
context.fillText('Hi from java2s.com!', 10, 100);
</script>
</body>
</html>
The code above is rendered as follows:
To set text color with HTML5 Canvas,
we can set the fillStyle property of the canvas context to
a color string, hex value, or RGB value.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!--from w w w.ja v a2 s . c o m-->
context.font = '60pt Calibri';
context.fillStyle = 'red';
context.fillText('Hi from java2s.com!', 100, 100);
</script>
</body>
</html>
The code above is rendered as follows:
To set the stroke color of text using HTML5 Canvas,
we can set the strokeStyle property
of the canvas context to a color string, hex value,
or RGB value.
Then we use the strokeText() method to stroke the text.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 80;
var y = 120;
<!-- ww w. j av a 2s .c o m-->
context.font = '100pt Calibri';
context.lineWidth = 5;
context.strokeStyle = 'red';
context.strokeText('hi from java2s.com!', x, y);
</script>
</body>
</html>
The code above is rendered as follows:
To align HTML5 Canvas text, we can use the textAlign property of the canvas context.
The textAlign property can be set to start, end, left, center, or right.
The alignment is relative to a vertical line at the x position of the text
defined by fillText() or strokeText().
The textAlign property is defaulted to start.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
<!-- w w w .ja v a 2 s .c o m-->
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText('Hi!', x, y);
</script>
</body>
</html>
The code above is rendered as follows:
To vertically align text with HTML5 Canvas,
we can use the textBaseline property of the canvas context.
The
textBaseline can be set with one of the following values:
top, hanging, middle, alphabetic, ideographic, and bottom.
The textBaseline property is defaulted to alphabetic.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
<!--from w ww . j a v a 2 s. co m-->
context.font = '30pt Calibri';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = 'blue';
context.fillText('Hi!', x, y);
</script>
</body>
</html>
The code above is rendered as follows:
To get the text metrics of HTML5 Canvas text, we can use the measureText() method of the canvas context.
The measureText() method returns an object containing a
width property.
This method accepts a string and returns a metrics object based on the provided text and the current text font.
The height of the text in pixels is equal to the font size.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" 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 = 'Hi!';
<!-- www. jav a 2 s. c o m-->
context.font = '60pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText(text, x, y);
var metrics = context.measureText(text);
var width = metrics.width;
context.font = '16pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'red';
context.fillText('(' + width + 'px wide)', x, y + 40);
</script>
</body>
</html>
The code above is rendered as follows:
The following code uses the width value returned from the measureText() method to calculate when the next line should wrap.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
<!--from w ww . j av a2 s. c o m-->
for(var n = 0; n < words.length; n++) {
line = line + words[n] + ' ';
var metrics = context.measureText(line);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var maxWidth = 400;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = 'This is a test. This is a test. This is a test. This is a test. This is a test. ';
text += 'This is a test. This is a test. This is a test. This is a test. This is a test. ';
context.font = '20pt Calibri';
context.fillStyle = 'red';
wrapText(context, text, x, y, maxWidth, lineHeight);
</script>
</body>
</html>
The code above is rendered as follows: