AuthorCode http://www.authorcode.com Find developer resources,code sample,articles, blogs, project samples for creating application in various technology. Free source code and tutorials for Software developers. Mon, 06 May 2013 08:06:59 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 drag and drop only text of the li into textarea in jQuery http://www.authorcode.com/drag-and-drop-only-text-of-the-li-into-textarea-in-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=drag-and-drop-only-text-of-the-li-into-textarea-in-jquery http://www.authorcode.com/drag-and-drop-only-text-of-the-li-into-textarea-in-jquery/#comments Sat, 27 Apr 2013 08:59:31 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4471

Related posts:

  1. Drag li element and drop to td of the html table using jQuery UI Demo The following example shows how to perform drag and...
  2. Example – Drag and Drop li to div Demo Drag li elements with the mouse anywhere with in...
  3. Drag and Drop li elements into Textbox From the below example you can drag a li element...
]]> I have written various code snippets for drag and drop element from one to another including drag an element and convert it into another element and then drop with the help of jQuery.
This time i will show you how you can drag text or value of the one element and append or insert this text into textarea html element. The code can be useful to create email and newsletter template at run time. The following code will work on all major browser including IE9.

Demo – Create E-mail Template(using drag and drop)

Available Fields

  • Name
  • Address
  • Phone
  • Sender Name
  • Sender Address
  • Sender Phone
  • Sender Email
  • Other1
  • Other2
  • Other3
  • Other4
  • Other5
Subject:
Read HTML5 Canvas Tutorial


Code

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
  7.      type="text/javascript"></script>
  8.     <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"
  9.      type="text/javascript"></script>
  10.     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
  11.         type="text/javascript"></script>
  12.     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
  13.         type="text/javascript"></script>
  14.     <style>
  15.         .textarea{background: #fff;}
  16.         .dragitems{width: 20%; float: left; background: #f1f1f1;}
  17.         .dropitems{width: 70%;float: left;background: #f1f1f1;
  18.                    margin-left: 20px;padding:5px 5px 5px 5px;}
  19.         .dragitems ul{list-style-type: none;padding-left: 5px;
  20.                    display: block;}
  21.         #content{height: 400px;width: 650px;}
  22.     </style>
  23.     <script language="javascript" type="text/javascript">
  24.         $(function() {
  25.             $("#allfields li").draggable({
  26.                 appendTo: "body",
  27.                 helper: "clone",
  28.                 cursor: "select",
  29.                 revert: "invalid"
  30.             });
  31.             initDroppable($("#TextArea1"));
  32.             function initDroppable($elements) {
  33.                 $elements.droppable({
  34.                     hoverClass: "textarea",
  35.                     accept: ":not(.ui-sortable-helper)",
  36.                     drop: function(event, ui) {
  37.                         var $this = $(this);
  38.  
  39.                         var tempid = ui.draggable.text();
  40.                         var dropText;
  41.                         dropText = " {" + tempid + "} ";
  42.                         var droparea = document.getElementById('TextArea1');
  43.                         var range1 = droparea.selectionStart;
  44.                         var range2 = droparea.selectionEnd;
  45.                         var val = droparea.value;
  46.                         var str1 = val.substring(0, range1);
  47.                         var str3 = val.substring(range1, val.length);
  48.                         droparea.value = str1 + dropText + str3;
  49.                     }
  50.                 });
  51.             }
  52.         });
  53.     </script>
  54.  
  55. </head>
  56. <body>
  57.     <form id="form1" runat="server">
  58.     <div id="content">
  59.         <h2 id="hpermittext" style="line-height: 120%;">
  60.             Demo – Create E-mail Template(using drag and drop)</h2>
  61.         <div class="dragitems">
  62.             <h3>
  63.                 <span>Available Fields</span></h3>
  64.             <ul id="allfields" runat="server">
  65.                 <li id="node1">Name</li>
  66.                 <li id="node2">Address</li>
  67.                 <li id="node3">Phone</li>
  68.                 <li id="node4">Sender Name</li>
  69.                 <li id="node5">Sender Address</li>
  70.                 <li id="node6">Sender Phone</li>
  71.                 <li id="node7">Sender Email</li>
  72.                 <li id="node8">Other1</li>
  73.                 <li id="node9">Other2</li>
  74.                 <li id="node10">Other3</li>
  75.                 <li id="node11">Other4</li>
  76.                 <li id="node12">Other5</li>
  77.             </ul>
  78.         </div>
  79.         <div class="dropitems">
  80.             <span>Subject: </span>
  81.             <input id="txtSubject" runat="server" maxlength="250"
  82.             style="width: 200px" type="text" /><a href=""> Read HTML5 Canvas Tutorial</a>
  83.             <textarea id="TextArea1" cols="50" name="S1"
  84.             rows="20">Hello HTMl5 canvas Tutorials on Authorcode </textarea>
  85.         </div>
  86.     </div>
  87.     </form>
  88. </body>
  89. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Drag li element and drop to td of the html table using jQuery UI Demo The following example shows how to perform drag and...
  2. Example – Drag and Drop li to div Demo Drag li elements with the mouse anywhere with in...
  3. Drag and Drop li elements into Textbox From the below example you can drag a li element...
]]> http://www.authorcode.com/drag-and-drop-only-text-of-the-li-into-textarea-in-jquery/feed/ 0 Text animation small to its full size in HTML5 http://www.authorcode.com/text-animation-small-to-its-full-size-in-html5/?utm_source=rss&utm_medium=rss&utm_campaign=text-animation-small-to-its-full-size-in-html5 http://www.authorcode.com/text-animation-small-to-its-full-size-in-html5/#comments Thu, 18 Apr 2013 07:06:56 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4461

Related posts:

  1. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
  2. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  3. Text rotation and scale in HTML5   The following code example demonstrates how to rotate and...
]]>  
See the Demo.
 

  1. <html>
  2. <head>
  3.     <title>Text small to big Animation</title>
  4.        <script type="text/javascript">
  5.        var can, ctx, step = 10, steps = 50;
  6.               delay = 20;
  7.              
  8.         function init() {
  9.             can = document.getElementById("MyCanvas");
  10.             ctx = can.getContext("2d");
  11.             ctx.fillStyle = "blue";
  12.             ctx.font = "10pt Helvetica";
  13.             ctx.textAlign = "center";
  14.             ctx.textBaseline = "middle";
  15.             TextSmallToBig();
  16.         }
  17.         function TextSmallToBig() {
  18.             step++;
  19.             ctx.clearRect(0, 0, can.width, can.height);
  20.             ctx.save();
  21.             ctx.translate(can.width / 2, can.height / 2);
  22.             ctx.font = step + "pt Helvetica";
  23.             ctx.fillText("Welcome", 0, 0);
  24.             ctx.restore();
  25.             if (step < steps)
  26.                 var t = setTimeout('TextSmallToBig()', 20);
  27.         }
  28.     </script>
  29.  
  30. </head>
  31. <body onload="init();">
  32.           <canvas id="MyCanvas" width="300" height="200">
  33.   This browser or document mode doesn't support canvas object</canvas>
  34. </body>
  35. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
  2. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  3. Text rotation and scale in HTML5   The following code example demonstrates how to rotate and...
]]> http://www.authorcode.com/text-animation-small-to-its-full-size-in-html5/feed/ 0 Text fade in fade out effect in HTML5 http://www.authorcode.com/text-fade-in-fade-out-effect-in-html5/?utm_source=rss&utm_medium=rss&utm_campaign=text-fade-in-fade-out-effect-in-html5 http://www.authorcode.com/text-fade-in-fade-out-effect-in-html5/#comments Thu, 18 Apr 2013 06:59:49 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4462

Related posts:

  1. Text style and settings in HTML5 canvas Text Alignment We can set the text alignment of the...
  2. Text Animation in HTML5 You can create text marquee (i.e. scrolling text left to...
  3. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
]]>  
The following code example shows the text fade in and fade out effect on the canvas in HTMl5.
 
For this effect we are using the rgb values to set the fillStyle of the text. The program increase the rgb values for the fade-out effect
and decrease the rgb values for the fade-in effect. See the Demo.
 

  1. <html>
  2. <head>
  3.     <title>Text fade in – fade out Animation</title>
  4.     <style>
  5.         canvas{border: 1px solid #bbb;}
  6.         .subdiv{width: 320px;}
  7.         .text{margin: auto; width: 290px;}
  8.     </style>
  9.  
  10.     <script type="text/javascript">
  11.         var can, ctx, step = 50, steps = 255;
  12.               delay = 20;
  13.               var rgbstep = 50;
  14.  
  15.         function init() {
  16.             can = document.getElementById("MyCanvas1");
  17.             ctx= can.getContext("2d");
  18.             ctx.fillStyle = "blue";
  19.             ctx.font = "40pt Helvetica";
  20.             ctx.textAlign = "center";
  21.             ctx.textBaseline = "middle";
  22.                      Textfadeup();        }
  23.  
  24.           function Textfadeup() {
  25.             rgbstep++;
  26.             ctx.clearRect(0, 0, can.width, can.height);
  27.             ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")"
  28.             ctx.fillText("WELCOME", 150, 100);
  29.             if (rgbstep < 255)
  30.                 var t = setTimeout('Textfadeup()', 10);
  31.             if (rgbstep == 255) {
  32.                 Textfadedown();
  33.             }
  34.         }
  35.         function Textfadedown() {
  36. rgbstep=rgbstep-1;
  37.             ctx.clearRect(0, 0, can.width, can.height);
  38.             ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")"
  39.             ctx.fillText("WELCOME", 150, 100);
  40.             if (rgbstep > 80)
  41.                 var t = setTimeout('Textfadedown()', 10);
  42.             if (rgbstep == 80) {
  43.                 Textfadeup();
  44.             }
  45.         }  
  46.     </script>
  47.  
  48. </head>
  49. <body onload="init();">
  50.     <div class="subdiv">
  51.         <canvas id="MyCanvas1" width="300" height="200">
  52.   This browser or document mode doesn't support canvas object</canvas>
  53.           </div>
  54. </body>
  55. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Text style and settings in HTML5 canvas Text Alignment We can set the text alignment of the...
  2. Text Animation in HTML5 You can create text marquee (i.e. scrolling text left to...
  3. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
]]> http://www.authorcode.com/text-fade-in-fade-out-effect-in-html5/feed/ 2 Text Animation in HTML5 http://www.authorcode.com/text-animation-in-html5/?utm_source=rss&utm_medium=rss&utm_campaign=text-animation-in-html5 http://www.authorcode.com/text-animation-in-html5/#comments Wed, 17 Apr 2013 18:07:29 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4457

Related posts:

  1. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
  2. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  3. Text rotation and scale in HTML5   The following code example demonstrates how to rotate and...
]]> 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.

 

 

50% of Hosting for your Website at GoDaddy.com!

 

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.



Get the Code:

Example 1 – Scrolling text left to right in HTML5

Example 2 -Scrolling text right to left in HTML5

Example 3 -Text rotation in HTML5

Example 4 -Text animation small to its full size in HTML5

Example 5 – Text fade-in and fade-out in HTML5

Thanks

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
  2. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  3. Text rotation and scale in HTML5   The following code example demonstrates how to rotate and...
]]> http://www.authorcode.com/text-animation-in-html5/feed/ 0 Text rotation and scale in HTML5 http://www.authorcode.com/text-rotation-and-scale-in-html5/?utm_source=rss&utm_medium=rss&utm_campaign=text-rotation-and-scale-in-html5 http://www.authorcode.com/text-rotation-and-scale-in-html5/#comments Wed, 17 Apr 2013 18:04:45 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4460

Related posts:

  1. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
  2. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  3. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
]]>  
The following code example demonstrates how to rotate and scale text on the canvas in HTML5. In the example, text is scaled and rotated repeatedly. The rotation starts with 0 to 2 x Pi radians and in each step increment is 2 * Pi / steps. A scale increment of 1 / steps is calculated, so the scale will grow to 1 in steps.
 
See the Demo.
 

  1. <html>
  2. <head>
  3.     <title>Text Animation</title>
  4.     <style>
  5.         canvas{border: 1px solid #bbb;}
  6.         .subdiv{width: 320px;}
  7.         .text{margin: auto; width: 290px;}
  8.     </style>
  9.  
  10.     <script type="text/javascript">
  11.         var can, ctx, addAngle, addScale, step, steps = 150,
  12.               delay = 20;
  13.  
  14.         function init() {
  15.             can = document.getElementById("MyCanvas1");
  16.             ctx = can.getContext("2d");
  17.             ctx.fillStyle = "red";
  18.             ctx.font = "20pt Helvetica";
  19.             ctx.textAlign = "center";
  20.             ctx.textBaseline = "middle";
  21.             addAngle = Math.PI * 2 / steps;
  22.             addScale = 1 / steps;
  23.             step = 0;
  24.             RotateTextSphere()
  25.         }
  26.  
  27.         function RotateTextSphere() {
  28.             step++;
  29.             ctx.clearRect(0, 0, can.width, can.height);
  30.             ctx.save();
  31.             ctx.translate(can.width / 2, can.height / 2);
  32.             ctx.scale(addScale * step, addScale * step);
  33.             ctx.rotate(addAngle * step);
  34.             ctx.fillText("Welcome", 0, 0);
  35.             ctx.restore();
  36.            if (step < steps)
  37.                 var t = setTimeout('RotateTextSphere()', 20);
  38.         }
  39.  
  40.     </script>
  41.  
  42. </head>
  43. <body onload="init();">
  44.     <div class="subdiv">
  45.         <canvas id="MyCanvas1" width="300" height="200">
  46.   This browser or document mode doesn't support canvas object</canvas>
  47.         <p class="text">
  48.          Example – Text Rotation in HTML5
  49.         </p>
  50.     </div>
  51. </body>
  52. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Scrolling text left to right in HTML5   The Following example demonstrates how to scroll the text...
  2. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  3. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
]]> http://www.authorcode.com/text-rotation-and-scale-in-html5/feed/ 0 Scrolling text left to right in HTML5 http://www.authorcode.com/scrolling-text-left-to-right-in-html5/?utm_source=rss&utm_medium=rss&utm_campaign=scrolling-text-left-to-right-in-html5 http://www.authorcode.com/scrolling-text-left-to-right-in-html5/#comments Wed, 17 Apr 2013 16:47:36 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4458

Related posts:

  1. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  2. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
  3. Text style and settings in HTML5 canvas Text Alignment We can set the text alignment of the...
]]>  
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:
 

  1.  <html>
  2. <head>
  3.     <title>Text Animation</title>
  4.     <style>
  5.         canvas{border: 1px solid #bbb;}
  6.         .subdiv{width: 320px;}
  7.         .text{margin: auto; width: 290px;}
  8.     </style>
  9.  
  10.     <script type="text/javascript">
  11.         var can, ctx, step, steps = 0,
  12.               delay = 20;
  13.  
  14.         function init() {
  15.             can = document.getElementById("MyCanvas1");
  16.             ctx = can.getContext("2d");
  17.             ctx.fillStyle = "blue";
  18.             ctx.font = "20pt Verdana";
  19.             ctx.textAlign = "center";
  20.             ctx.textBaseline = "middle";
  21.             step = 0;
  22.             steps = can.width + 50;
  23.             RunTextLeftToRight();
  24.         }
  25.  
  26.         function RunTextLeftToRight() {
  27.             step++;
  28.             ctx.clearRect(0, 0, can.width, can.height);
  29.             ctx.save();
  30.             ctx.translate(step, can.height / 2);
  31.             ctx.fillText("Welcome", 0, 0);
  32.             ctx.restore();
  33.             if (step == steps)
  34.                 step = 0;
  35.             if (step < steps)
  36.                 var t = setTimeout('RunTextLeftToRight()', delay);
  37.         }
  38.     </script>
  39.  
  40. </head>
  41. <body onload="init();">
  42.     <div class="subdiv">
  43.         <canvas id="MyCanvas1" width="300" height="200">
  44.   This browser or document mode doesn't support canvas object</canvas>
  45.         <p class="text">
  46.             Example 1 – Marquee Text left to right – scrolling text
  47.         </p>
  48.     </div>
  49. </body>
  50. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Scrolling text right to left in HTML5   The Following example gives you an idea to scrolling...
  2. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
  3. Text style and settings in HTML5 canvas Text Alignment We can set the text alignment of the...
]]> http://www.authorcode.com/scrolling-text-left-to-right-in-html5/feed/ 0 Scrolling text right to left in HTML5 http://www.authorcode.com/scrolling-text-right-to-left-in-html5/?utm_source=rss&utm_medium=rss&utm_campaign=scrolling-text-right-to-left-in-html5 http://www.authorcode.com/scrolling-text-right-to-left-in-html5/#comments Wed, 17 Apr 2013 16:35:24 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4459

Related posts:

  1. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
  2. Text style and settings in HTML5 canvas Text Alignment We can set the text alignment of the...
  3. Draw Rainbow with Linear gradient in HTML5   The following snippet shows how to fill a rectangle...
]]>  
The Following example gives you an idea to scrolling the text on the canvas in HTML5. The example uses the save(), translate() and restore() methods to animate the text.

  1.   <html>
  2. <head>
  3.     <title>Text Animation</title>
  4.     <style>
  5.         canvas{border: 1px solid #bbb;}
  6.         .subdiv{width: 320px;}
  7.         .text{margin: auto; width: 290px;}
  8.     </style>
  9.  
  10.     <script type="text/javascript">
  11.         var can, ctx, step, steps = 0,
  12.               delay = 20;
  13.  
  14.         function init() {
  15.             can = document.getElementById("MyCanvas1");
  16.             ctx = can.getContext("2d");
  17.             ctx.fillStyle = "blue";
  18.             ctx.font = "20pt Verdana";
  19.             ctx.textAlign = "center";
  20.             ctx.textBaseline = "middle";
  21.             step = 0;
  22.             steps = can.height + 50;
  23.             RunTextRightToLeft();
  24.         }
  25.  
  26.         function RunTextRightToLeft() {
  27.             step++;
  28.             ctx.clearRect(0, 0, can.width, can.height);
  29.             ctx.save();
  30.             ctx.translate(can.width / 2, step);
  31.             ctx.fillText("Welcome", 0, 0);
  32.             ctx.restore();
  33.             if (step == steps)
  34.                 step = 0;
  35.             if (step < steps)
  36.                 var t = setTimeout('RunTextRightToLeft()', delay);
  37.         }
  38.  
  39.     </script>
  40.  
  41. </head>
  42. <body onload="init();">
  43.     <div class="subdiv">
  44.         <canvas id="MyCanvas1" width="300" height="200">
  45.   This browser or document mode doesn't support canvas object</canvas>
  46.         <p class="text">
  47.             Example- Marquee Text(right to light)- scrolling text
  48.         </p>
  49.     </div>
  50. </body>
  51. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
  2. Text style and settings in HTML5 canvas Text Alignment We can set the text alignment of the...
  3. Draw Rainbow with Linear gradient in HTML5   The following snippet shows how to fill a rectangle...
]]> http://www.authorcode.com/scrolling-text-right-to-left-in-html5/feed/ 0 Text style and settings in HTML5 canvas http://www.authorcode.com/text-style-and-settings-in-html5-canvas/?utm_source=rss&utm_medium=rss&utm_campaign=text-style-and-settings-in-html5-canvas http://www.authorcode.com/text-style-and-settings-in-html5-canvas/#comments Mon, 15 Apr 2013 12:05:41 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4452

Related posts:

  1. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
  2. Stroke and Fill style in HTML5 canvas We use the strokeStyle property with stroke method and fillStyle...
  3. Draw Rectangle and Circle shape in HTML5 canvas The following code examples shows a method that creates a...
]]> 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.

ctx.textAlign = "center";

Text Baseline

We can change the text baseline by setting the context’s textBaseline property. The valid values will be top, hanging, middle, alphabetic, ideographic and bottom.

ctx.textBaseline = "middle";

Change the color of the text

canvas use the current fill and stroke style for the text. We can set the fillStyle or strokeStyle to change the fore color of the text.
ctx.fillStyle = "blue";

Change the font of the text

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.

ctx.font = "24pt Verdana";
 
Draw text on canvas html5
 

Example

The following example will draw the string ‘Welcome’ on the canvas.

  1. <html>
  2. <head>
  3.   <title>Draw text</title>
  4.     <style type="text/css">
  5.         #MyCanvas {border:1px solid black;}
  6.     </style>
  7.   <script type="text/javascript">
  8.       function drawText() {
  9.           var ctx;
  10.           var canvas = document.getElementById("MyCanvas");
  11.           if (canvas.getContext) {
  12.               ctx = canvas.getContext("2d");
  13.               ctx.fillStyle = "Red";
  14.               ctx.textAlign = "center";
  15.               ctx.textBaseline = "middle";
  16.               ctx.font = "20pt verdana";
  17.               ctx.fillText("Welcome", 100, 100);
  18.           }
  19.       }
  20.   </script>
  21. </head>
  22. <body onload="drawText();">
  23.   <canvas id="MyCanvas" width="350" height="200">
  24.   This browser or document mode doesn't support canvas object</canvas>
  25.  </body>
  26. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Draw Text on canvas in HTML5   You can draw the text on the HTML5 canvas,...
  2. Stroke and Fill style in HTML5 canvas We use the strokeStyle property with stroke method and fillStyle...
  3. Draw Rectangle and Circle shape in HTML5 canvas The following code examples shows a method that creates a...
]]> http://www.authorcode.com/text-style-and-settings-in-html5-canvas/feed/ 0 Draw Text on canvas in HTML5 http://www.authorcode.com/draw-text-on-canvas-in-html5/?utm_source=rss&utm_medium=rss&utm_campaign=draw-text-on-canvas-in-html5 http://www.authorcode.com/draw-text-on-canvas-in-html5/#comments Mon, 15 Apr 2013 10:02:37 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4449

Related posts:

  1. Draw Rectangle and Circle shape in HTML5 canvas The following code examples shows a method that creates a...
  2. Draw Quadratic Curve in HTML5 The quadratic curve requires ending and control points and starting...
  3. Draw Rainbow with Linear gradient in HTML5   The following snippet shows how to fill a rectangle...
]]>  
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.

  1. <html>
  2. <head>
  3.   <title>Draw text</title>
  4.     <style type="text/css">
  5.         #MyCanvas {border:1px solid black;}
  6.     </style>
  7.   <script type="text/javascript">
  8.       function drawText() {
  9.           var ctx;
  10.           var canvas = document.getElementById("MyCanvas");
  11.           if (canvas.getContext) {
  12.               ctx = canvas.getContext("2d");
  13.               ctx.font = "15pt verdana";
  14.               ctx.fillText("Welcome", 100, 100);
  15.           }
  16.       }
  17.   </script>
  18. </head>
  19. <body onload="drawText();">
  20.   <canvas id="MyCanvas" width="350" height="200">
  21.   This browser or document mode doesn't support canvas object</canvas>
  22.  </body>
  23. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Draw Rectangle and Circle shape in HTML5 canvas The following code examples shows a method that creates a...
  2. Draw Quadratic Curve in HTML5 The quadratic curve requires ending and control points and starting...
  3. Draw Rainbow with Linear gradient in HTML5   The following snippet shows how to fill a rectangle...
]]> http://www.authorcode.com/draw-text-on-canvas-in-html5/feed/ 0 Bezier curve in HTML5 canvas http://www.authorcode.com/bezier-curve-in-html5-canvas/?utm_source=rss&utm_medium=rss&utm_campaign=bezier-curve-in-html5-canvas http://www.authorcode.com/bezier-curve-in-html5-canvas/#comments Thu, 11 Apr 2013 13:34:50 +0000 Hirendra Sisodiya http://www.authorcode.com/?p=4433

Related posts:

  1. Draw Quadratic Curve in HTML5 The quadratic curve requires ending and control points and starting...
  2. Radial gradient in HTML5 The another type of the gradient is Radial gradient that...
  3. Linear gradient in HTML5 A gradient effect specifies a starting color, an ending color,...
]]>  
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.
 
bezier curve in html5
 
We use the bezierCurveTo method to draw a bezier curve.

ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);

cpx1 and cpy1: are the first control points of the bezier curve.
cpx2 and cpy2: are the second control points of the bezier curve.
x and y: are the ending points of the bezier curve.
 

  1. <html>
  2. <head>
  3.   <title>Draw Arc</title>
  4.     <style type="text/css">
  5.         #MyCanvas {border:1px solid black;}
  6.     </style>
  7.   <script type="text/javascript">
  8.       function drawGradient() {
  9.           var ctx;
  10.           var canvas = document.getElementById("MyCanvas");
  11.           if (canvas.getContext) {
  12.               ctx = canvas.getContext("2d");
  13.               // Draw a quadratic curve .
  14.               ctx.beginPath();
  15.               ctx.lineWidth = "2";
  16.               ctx.strokeStyle = "black";
  17.               ctx.moveTo(50, 150);
  18.               ctx.bezierCurveTo(200, 200, 200, 0, 300, 100);
  19.               ctx.stroke();
  20.           }
  21.       }
  22.   </script>
  23. </head>
  24. <body onload="drawGradient();">
  25.   <canvas id="MyCanvas" width="400" height="200">
  26.   This browser or document mode doesn't support canvas object</canvas>
  27.  </body>
  28. </html>

Thanks for reading, check out AuthorCode for more Authorcode contents

Related posts:

  1. Draw Quadratic Curve in HTML5 The quadratic curve requires ending and control points and starting...
  2. Radial gradient in HTML5 The another type of the gradient is Radial gradient that...
  3. Linear gradient in HTML5 A gradient effect specifies a starting color, an ending color,...
]]> http://www.authorcode.com/bezier-curve-in-html5-canvas/feed/ 1