StudywithDemo

HTML5 Canvas API Examples

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
One of the goals of HTML5 is to make the web completely independent of plugins such as Silverlight, Flash or java applets. To handle this HTML5 introduced the canvas API to create own graphics in our websites with help of JavaScript. It creates a drawing surface a blank area with in the browser that area is marked of in XY coordinates. In this tutorial i want to explain how to create different shapes using canvas element easily with examples. Lets Start with rectangles</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
The rectangles are fully supported by the canvas tag and it has three set of properties like stroke, fill, clear. In this sample ex i have created canvas it has blue outline and filled with green background color and inside the canvas i just drawn  the sample shape rectangle and filled with light green. Please look the example</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDjRUP7m0jXau36og-URXHWn2C2IqK7J98dd7WEUjkWh1kSJ2qW9FBIvP69PDipvhmE0MyU7TzL44SZdr1wKtkyQ0i0tSPuAu6ZOgmlXeP6O3aM5W7hMXMs0khu9iXapT2heYT71v5w0/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDjRUP7m0jXau36og-URXHWn2C2IqK7J98dd7WEUjkWh1kSJ2qW9FBIvP69PDipvhmE0MyU7TzL44SZdr1wKtkyQ0i0tSPuAu6ZOgmlXeP6O3aM5W7hMXMs0khu9iXapT2heYT71v5w0/s1600/Capture.PNG" width="320"></a></div>
</div>

HTML5 Canvas API Examples

One of the goals of HTML5 is to make the web completely independent of plugins such as Silverlight, Flash or java applets. To handle this ...

How to Make Stamp Size Photos in Photoshop Easily

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Now we are going to see how to make stamp size photo in Photoshop. By following this technique you can easily create a stamp size photo to any one of your family members, friends or relatives.Initially I  will show how to set 16 photos in one maxi by doing this we can get 16 stamp size photoswith one maxi size photo and printing cost is less than 10 rupees so it is not a big matter. Just you need a little bit Photoshop knowledge and we can use any version of Photoshop. Start following step by step procedure as shown below</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH8l12yMYo2RHuHfajpZna4Xg9hMG8HuJlvrBme599841KB-bEDc-Xs9gXlaUxmX3c9BLnLf9ROOSrvBYLrspfcrfrj32xkpIqw1ssO90Ch8eNg7ModYrhdIT1nNbZ_pwfa0eJapuL2rI/s1600/stampsize.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="425" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH8l12yMYo2RHuHfajpZna4Xg9hMG8HuJlvrBme599841KB-bEDc-Xs9gXlaUxmX3c9BLnLf9ROOSrvBYLrspfcrfrj32xkpIqw1ssO90Ch8eNg7ModYrhdIT1nNbZ_pwfa0eJapuL2rI/s1600/stampsize.jpg" width="640"></a></div>
</div>

How to Make Stamp Size Photos in Photoshop Easily

Now we are going to see how to make stamp size photo in Photoshop. By following this technique you can easily create a stamp size photo to...

Spring 4 MVC Java Configuration Example

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial i want to explain about how to do spring 4 MVC Java Configuration with example. Java configuration doesn’t require an appContext.xml or even a servlet-config.xml we can do all our configurations in java classes by using @Configuration and @EnableWebMVC annotations. Spring provided set of annotations for various Configuration elements like component-scan, interceptors, handlers, formatters, converts, etc. One more think in this example I also covered WebAppInitializer class using this we can run the web application without web.xml.</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
First setup project: There are multiple ways to setup a project in eclipse or spring STS all are previous methods you used will works fine. There is also option to use spring web project inside our IDE and more convenient way using spring STS 3.5+ and spring 4</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9SRsTmBm2QvdkxxjVkQKUZW-cMiBCHAkb8UDWT-YGJwwB3NhbABIDewDVfzHpMTkSc6IJhxGgn6sJqTTuYEoUzCtpn6gal7NA1j0g2-rNqtqLVeUV6czAvYHvQvgZb-wxsLxXllUhKw/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9SRsTmBm2QvdkxxjVkQKUZW-cMiBCHAkb8UDWT-YGJwwB3NhbABIDewDVfzHpMTkSc6IJhxGgn6sJqTTuYEoUzCtpn6gal7NA1j0g2-rNqtqLVeUV6czAvYHvQvgZb-wxsLxXllUhKw/s1600/Untitled.png" width="211"></a></div>
</div>
<div style="text-align: justify;">
Step 1: Open the spring STS and go to the package explorer right click on it select new-> other and go down to Spring and Spring Starter Project then click next provide the required details check the web and finally click finish</div>
<div style="text-align: justify;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpkAsMsDby3HO1bMv0Jq50QkQYbU4dCaSSLlTH2HsqXwoBVKMY8MyipkrXYddC8X_8CwOzjZSLO5YcZjOIeoTA2Bx8BCyg-zqu4ZQsPh78nIbX8ntE49vKByAdaPsIGK5QH_Wm76SOAUM/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpkAsMsDby3HO1bMv0Jq50QkQYbU4dCaSSLlTH2HsqXwoBVKMY8MyipkrXYddC8X_8CwOzjZSLO5YcZjOIeoTA2Bx8BCyg-zqu4ZQsPh78nIbX8ntE49vKByAdaPsIGK5QH_Wm76SOAUM/s1600/3.png" width="640"></a></div>
<div style="text-align: justify;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisGxivB43W65yL8SIlmtAR6o9eplg_QBpkp2lEwbTSNqoGTLE-amwsWH3vcDgaO5z0zLHE7DNdO0H6JNw6U5grMDayCMo5kkurNRo0yiGqY3_ayoNUX1rLl02ewDkl6QKfDWOrpZbNa14/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisGxivB43W65yL8SIlmtAR6o9eplg_QBpkp2lEwbTSNqoGTLE-amwsWH3vcDgaO5z0zLHE7DNdO0H6JNw6U5grMDayCMo5kkurNRo0yiGqY3_ayoNUX1rLl02ewDkl6QKfDWOrpZbNa14/s1600/1.png" width="640"></a></div>
</div>

Spring 4 MVC Java Configuration Example

In this tutorial i want to explain about how to do spring 4 MVC Java Configuration with example. Java configuration doesn’t require an app...

Customizing the HTML5 Video and Audio Controls

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
One of the most powerful feature of HTML5 is supports for audio and video tags this feature allows you to reduce the third party plug-ins  like silverlight and flash. HTML5 programmers has really done nice job  by developing these tags. These video and audio tags contains predefined controls but I want to develop custom controls using javascript according to real time requirements. Creating custom video play and pause buttons are very easy when compare to creating stop, forward, reverse buttons and also developed the custom audio controls to increase and decrease the volume. One more think can also develop same code in jquery. Lets begin</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3c68Uh6xMAPVppZHzyONw0EUDg4VsXPMO0UZMiogsCv0eItAtK2ru0cy5h3sBIxa0k6GejQUxwRxfrxMnrXCwKtrvaIYeVqnSrGTbxx4hp6JBUaFXYCSa4jgr3TXyBZAe-iQhEEugrk/s1600/video+and+audio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="453" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3c68Uh6xMAPVppZHzyONw0EUDg4VsXPMO0UZMiogsCv0eItAtK2ru0cy5h3sBIxa0k6GejQUxwRxfrxMnrXCwKtrvaIYeVqnSrGTbxx4hp6JBUaFXYCSa4jgr3TXyBZAe-iQhEEugrk/s1600/video+and+audio.png" width="640"></a></div>
</div>

Customizing the HTML5 Video and Audio Controls

One of the most powerful feature of HTML5 is supports for audio and video tags this feature allows you to reduce the third party plug-ins ...

How to Access HTML5 Data Attributes using JQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery contains data() and attr() methods by using this we will see how to set and get HTML5 data-attributes data. HTML5 has brought  lot of interesting changes into html one of the item that is very helpful in client side programming is data-* Attributes provide a way to store custom data on elements.</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
Jquery easily read and write data using two approaches but there are some differences between them here we can except different outputs so observe the examples carefully.</div>
<div style="text-align: justify;">
<br>
<b>Example</b><br>
<br></div>
<div style="text-align: justify;">
<pre class="brush:html"><!DOCTYPE html>
<html>
<head>
    <title>Accessing HTML5 Data-* Attributes Example</title>
</head>
<body>
    <div id="attendanceList"  
     data-name="faruk" 
     data-age="24" 
     data-gender="male"
     data-attended ="true"
     data-object='{"name": "faruk", "gender":"male", "age": 24, "attended": true}'>
     Today Faruk Attended to Class
 </div>
    
    <h1>How to set /get data-* values using attr() function</h1>
    <div id="attrOutput"></div>
    <h1>How to set /get data-* values using data() function</h1>
    <div id="dataOutput"></div>
    <script src="jquery.min.js"></script>
    <script>
        var $attendanceList  = $("#attendanceList ");
        var $attrOutput = $("#attrOutput");
        var getName = $attendanceList.attr("data-name");
        var getAge = $attendanceList.attr("data-age");
        var getGender = $attendanceList.attr("data-gender");
        var addingOneToAge = getAge + 1;
        var getAttended = $attendanceList.attr("data-attended");
        var getObject = $attendanceList.attr("data-object");
  
        $attrOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
        <br /><br />Age: " + getAge + " = " + typeof (getAge) +"
        <br /><br />Age + 1: " + addingOneToAge +"
        <br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
        <br /><br />Object: " + getObject);
       
  //var setName = $attendanceList.attr("data-name","shaik");
  //alert(setName.attr("data-name"));
  
  var $attendanceList  = $("#attendanceList");
        var $dataOutput = $("#dataOutput");
        var getName = $attendanceList.data("name");
        var getAge = $attendanceList.data("age");
  var getGender = $attendanceList.data("gender");
        var addingOneToAge = getAge + 1;
        var getAttended = $attendanceList.data("attended");
        var getObject = $attendanceList.data("object");
  
        $dataOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
        <br /><br />Age: " + getAge + " = " + typeof (getAge) +"
        <br /><br />Age + 1: " + addingOneToAge +"
        <br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
        <br /><br />Object: " + getObject);
  
  //var setName = $attendanceList.attr("data-name","shaik");
  //alert(setName.data("name"));
    </script>
</body>
</html>
</pre>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #990000;">Output Screenshot</span></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" width="640"></a></div>
</div></div>

How to Access HTML5 Data Attributes using JQuery

In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery co...