Category Archives: HTML5

HTML 5 is the advanced version of the HTML. HTML5 adds many new syntactic features. These include the new , and elements, Other new elements are , , and etc. HTML 5 supports the various programming APIs that can be used with the help of JavaScript such as .

The canvas element (For 2D drawing), Timed media playback, Offline Web Applications, Drag-and-drop,Document editing, Microdata, Browser history management,Web Storage,
file API,File Writer and Web Audio API etc.

Learn the HTML 5

Canvas
Start with canvas
Draw Path and Lines
Draw paths
Lines
Arcs
Stroke and Fill Style
Bezier Curves
Quadratic Curve
Draw Shapes
Rectangle and Circle
Custom Shapes
Gradients Styles
Linear gradient
Radial gradient
Text
Draw Text
Style and Setting
Text animation
HTML 5 supported APIs
GeoLocation API
Animation
A Simple Example

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.
 


Draw text on canvas html5

 

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>