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
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.
The article demonstrate the following text animations on the canvas. See the Demo.
All example, displays the text “Welcome” in the various animation. In the first example the text “welcome” is scrolling continuously left to right on the other hand in the second example text is scrolling right to left.And in the third example the text spins in starting small and growing to its full size as it spins. The forth animation displays text small to big size.
Examples with code
The below example shows us how to scroll the text left to right on the canvas in HTML5 without using any CSS.
The following example display a similar result to the above method but in this example text scrolls top to bottom.
The Following example gives you an idea to scrolling the text on the canvas in HTML 5.
The following code example demonstrates how to text fade in and fade out effect on the canvas 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
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
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
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
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.
The following example will draw the string ‘Welcome’ on the canvas.
The bezier curve requires ending points and two control points and starting points will be current point. You can use the beginPath and moveTo methods to set a starting point. Continue reading Bezier curve in HTML5 canvas
The quadratic curve requires ending and control points and starting points will be current point. If current point is not defined then you can use the beginPath and moveTo methods to set a starting point. Continue reading Draw Quadratic Curve in HTML5