Tag Archives: 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, … Continue reading Text animation small to its full size 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. The article demonstrate the following text animations on the canvas. See the Demo. All example, displays the text “Welcome” in the various animation. In … Continue reading Text Animation in HTML5

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 … Continue reading Draw Text on canvas in HTML5