Scaling is the next method for transforming canvas, We have already discuss how to rotate canvas and about to translate method in our previous article Rotate object or shape in HTML5 Canvas. Continue reading “Scaling object or shape and flip text in HTML5 Canvas”
Tag: Text on canvas
Text animation small to its full size in HTML5
See the Demo.
<html>
<head>
<title>Text small to big Animation</title>
<script type="text/javascript">
var can, ctx, step = 10, steps = 50;
delay = 20;
function init() {
can = document.getElementById("MyCanvas");
ctx = can.getContext("2d");
ctx.fillStyle = "blue";
ctx.font = "10pt Helvetica";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
TextSmallToBig();
}
function TextSmallToBig() {
step++;
ctx.clearRect(0, 0, can.width, can.height);
ctx.save();
ctx.translate(can.width / 2, can.height / 2);
ctx.font = step + "pt Helvetica";
ctx.fillText("Welcome", 0, 0);
ctx.restore();
if (step < steps)
var t = setTimeout('TextSmallToBig()', 20);
}
</script>
</head>
<body onload="init();">
<canvas id="MyCanvas" width="300" height="200">
This browser or document mode doesn't support canvas object</canvas>
</body>
</html>Text fade in fade out effect in HTML5
The following code example shows the text fade in and fade out effect on the canvas in HTMl5. Continue reading “Text fade in fade out effect in HTML5”
Text Animation in HTML5
You can create text marquee (i.e. scrolling text left to right and right to left on the canvas) and can create a text animation such as text rotation, text highlight etc. Continue reading “Text Animation in HTML5”
Text rotation and scale in HTML5
The following code example demonstrates how to rotate and scale text on the canvas in HTML5. Continue reading “Text rotation and scale in HTML5”
Scrolling text left to right in HTML5
The Following example demonstrates how to scroll the text left to right on the canvas in HTML5. The example does not use any CSS for marquee text. Try the example: Continue reading “Scrolling text left to right in HTML5”
Scrolling text right to left in HTML5
The Following example gives you an idea to scrolling the text on the canvas in HTML 5. The example uses the save(), translate() and restore() methods to animate the text. Continue reading “Scrolling text right to left in HTML5”
Text style and settings in HTML5 canvas
Text Alignment
We can set the text alignment of the text by setting the context’s textAlign property. The valid values will be left, right, and center. Continue reading “Text style and settings in HTML5 canvas”
Draw Text on canvas in HTML5
You can draw the text on the HTML5 canvas, for it we use the following JavaScript method:
fillText(text, x, y [,maxWidth]) method fills the text in the current fill style.
strokeText(text, x, y [,maxWidth]) method outlines the text in the current stroke style.
Both methods uses the following arguments:
text: The text to draw into the context.
x: The X coordinate at which to begin drawing.
y: The Y coordinate at which to begin drawing.
maxWidth(Optional): the maximum width to draw.
we use the font property of the canvas context to set the font of the drawn text that will contains the font style, size, and family name.
Example
The following example will draw the string ‘Welcome’ on the canvas.
<html>
<head>
<title>Draw text</title>
<style type="text/css">
#MyCanvas {border:1px solid black;}
</style>
<script type="text/javascript">
function drawText() {
var ctx;
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
ctx.font = "15pt verdana";
ctx.fillText("Welcome", 100, 100);
}
}
</script>
</head>
<body onload="drawText();">
<canvas id="MyCanvas" width="350" height="200">
This browser or document mode doesn't support canvas object</canvas>
</body>
</html>