Canvas text

Although drawing text with canvas element is not as powerful as fully blown CSS, it can be used to draw and style text as well.

The main methods used for drawing text with canvas are:

font - explains the font property that will be used
fillText(text,x,y) - fills the given text at the given position indicated by the given coordinates x and y
fillStyle - CSS based color for text that call fillText method
strokeText(text,x,y) - strokes the given textat the given position indicated by the coordinates as x and y
strokeStyle - CSS based color for text written by strokeText method - textBaseline - explains the baseline alignment to be set for the text; possible values are top, hanging, middle , alphabetic, ideographic and bottom

To set the font, size, and style of HTML5 Canvas text, we can set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces. The style can be normal, italic, or bold. unless otherwise specified, the font style is defaulted to normal.

Example

Example how to create text with canvas element:

<html>
<head>
<script type="text/javascript">
function drawText() {
    var canvaselm = document.getElementById('mycanvas').getContext('2d');
    canvaselm.fillStyle = '#00F';
 	canvaselm.font = 'Italic 36px Calibri';
	canvaselm.textBaseline = 'Top';
    canvaselm.fillText('Bienvenidos!', 40, 100);
	canvaselm.font = 'Bold 36px Calibri';
    canvaselm.strokeText('Benvenuti!', 40, 50); 
}
</script>
<style type="text/css">
	#mycanvas {
		left:2%;
		width:96%; height:220px;
		margin:0px auto;
		background-color:#e8e7e6;
		box-shadow:inset 1px -1px 10px #999;
	};
</style>
</head>
<body onload="drawText();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

›› go to examples ››

The main methods used for drawing text with canvas are:

Example

Example how to create text with canvas element:

Comments

About

Contact

Get Connected