Basic of Canvas Element in HTML5

HTML5 Canvas

Canvas element is useful for draw graphics on a web pages. With the help of canvas element we can draw rectangular area, and also control each and every pixels. It have various methods to draw any graphics.
Whenever we are going to draw any graphics first of all we should create Canvas element like:
< canvas id="CanvasID" width="100" height="100">< /canvas>
Canvas element have no drawing capability. So we must be done it in javaScript method like:

< script type="text/javascript">
var canId=document.getElementById("CanvasID");
var cantext= canId.getContext("2d");
cantext.fillStyle="#FF0000";
cantext.fillRect(0,0,180,95);
< /script>
Basically JavaScript uses id to find the canvas element:

Solid Understanding of the Basics of HTML5 Part 1

HTML5 Introduction

HTML5 is advanced of HTML. It is the new standared for HTML. Now days most modern browsers have support. Example, Crome, Mozila 10.0.2, IE 9.
There are following Rules for HTML 5, which is given bellow:-
1) There are some new features based on HTML, CSS, DOM, JavaScript
2) Best way to Error handling
3) HTML5, device independent
4) Reduce external Plugins

What new features is in HTML 5?

There are some following new features in HTML5:
1) Canvas element for drawing charts according to user preference.
2) The most powerful feature audio and video elements for media.
3) Best support for local offline storage.
4) Add new tag elements.
5) Add new form controls.

List of new tag elements

Media Elements Tags in HTML 5
1)< audio >
2)< video >
3)< source >
4)< embed >
5)< track >
Canvas Element Tags in HTML 5
1)< canvas>
Form Elements Tags in HTML 5
1)< datalist>
2)< keygen>
3)< output>
Input Type Attribute Values in HTML 5
1) tel
2) search
3) url
4) email
5) datetime
6) date
7) month
8) week
9) time
10) datetime-local
11) number
12) range
13) color
14) placeholder
< video> - Methods, Properties, and Events Tags in HTML 5
1) play()
2) pause()
3) load()
4) canPlayType
< video> Properties in HTML 5
1) currentSrc
2) currentTime
3) videoWidth
4) videoHeight
5) duration
6) ended
7) error
8) paused
9) muted
10) seeking
11) volume
12) height
13) width
< video> Events in HTML 5
1) play
2) pause
3) progress
4) error
5) timeupdate
6) ended
7) abort
8) empty
9) emptied
10) waiting
11)oadedmetadata

Example:

What is RSS?

RSS stand for Really Simple Syndication. Basic definition of RSS is that Simply RSS is a method which use XML to distribute web of one web site to many other web sites.
It gives us an easy way to share and view headlines and content.
Really Simple Syndication(RSS) files can updated automatically.
We can use RSS personal views for different sites.
RSS is can also written in XML.
With the help of RSS we can perform fast browsing for news and also use to update them.
With the help of RSS we can syndicate our site content

copyright element in RSS?

All rights reserved by R4R

image element in RSS?

Display an image when aggregators presents a RSS feed. To define element tag to use these three child elements.
: used to define the URL of image.

site link

language element in RSS?

en-uk

item element in RSS?

Define an element we must have to use these three child element.
1.
http://www.astrosage.com
huge collection of interview questions


http://www.astrosage.com/rss
RSS ...

Category element in RSS?

RSS we use child element to define category for your RSS.
Using element RSS aggregator can grouped the web sites on the base of category.
How to define element in RSS document?
Web Designing
Learn SQL SERVER 2008 Tutorials

Better Coding in Classic ASP!

how we do Better Coding in Classic ASP!

• Database in Session or App. Say NO!
• Cache No More
• Use Option Explicit
• Encode with Redirects
• Write Your SQL
• Named constants for ADO are better
• Clean Up Objects
• Server.MapPath is Good
• Just Say No to Session COM objects
• Don't Read COM Properties Twice
• Secure Code and Data
• Encaspulate Code!
• CASE reads better than IF
• Error Trapping Strategies
• Error Trapping Secrets

Classic ASP Objects Part 1

Classic ASP Object:

Response Object:
Basicaly we are using ASP Response object to send output to the user from the server.
response.write alternate syntax <%= %>
Example:

<% response.write("Hello New Programmer...!") %>.
Method for Response Object

1)AddHeader:- Adds HTTP header abd HTTP response

2)AppendToLog:- Adds a string to the end of the server log entry

3)BinaryWrite:- Writes data, without any character conversion

4)Clear:- Clears any buffered HTML output

5)End :- Stops the current processing a script.

6)Flush:- Sends buffered output immediately

7)Redirect:- Redirects the user to a different URL intrire a application

8)Write:- Writes a specified string

Request Object:

Request Object:
Request object is used to get information from a user or visiter.
There are various collection for Request Objects:
Requesr.form("name")
Request.QueryString("name")
Request.cookies("cookiesname")
Request.ServerVariables (server_variable)
There are only ine method for Request object
BinaryRead : Retrieves the data sent to the server from the client.
<% dim a,b a=Request.TotalBytes b=Request.BinaryRead(a) %>

ASP Application Object:

ASP Application Object:

The Application object holds information that will be used by many pages in the application (like database connection information). The information can be accessed from any page. The information can also be changed in one place, and the changes will automatically be reflected on all pages.

<% Dim DailyHoroscope Application("DailyHoroscope")="Good day filled with happiness. All commitments and financial transactions need to be handled carefully. A lack of communication with someone you care will leave you depressed. tree in autumn. If travelling make sure you carry all-important documents. " Response.write(Application("DailyHoroscope")) %>

ASP Session Object:

Session Object: The Session object stores information about a user. session is logicaly objects to preserve data accross subsequence HTTP request.
<% Session("username")="Deepak madheshiya" Session("age")=24 %>

Checking for Browser Support HTML 5

Checking for Browser Support

Before you use the canvas element, make sure there is support in the browser or not. Using this way, you can provide some alternate text in case there is no support in their antique browser.
Example:
try {
document.createElement("canvasId").getContext("2d");
document.getElementById("browsersupport").innerHTML =
"Wow… HTML5 Canvas is supported in your browser.";
} catch (e) {
document.getElementById("browsersupport ").innerHTML = "Sorry… HTML5 Canvas is not supported
in your browser.";
}

In this example, you try to create a canvas object and access its context. If there is an error, you will
catch it and know that Canvas is not supported. A previously defined support element on the page is
updated with a suitable message to reflect whether there is browser support or not.
This test will indicate whether the canvas element itself is supported by the browser. It will not
indicate which capabilities of the Canvas are supported. At the time of this writing, the API is stable and
well-supported, so this should generally not be an issue to worry about.

Let us play with HTML 5, specially HTML 5 Canvas

Prerequisites:

All you need to get started with Basic is a modern browser such as Google Chrome, Firefox, Safari, Opera, or IE9, a good working knowledge of JavaScript, and a simple text editor like notepad. 

The HTML5 Canvas element is very similar to HTLM tag like <table>, <span>, <div> with exception that it is contents are rendered with JavaScript. 

<canvas id="myCanvas"></canvas> 

HTML5 Canvas Template 

<!DOCTYPE HTML>

<html>

    <head>

        <script> 

            window.onload = function(){

                var canvas = document.getElementById("myCanvas");

                var context = canvas.getContext("2d"); 

                // do your action here

            }; 

        </script>

    </head>

    <body>

        <canvas id="myCanvas" width="600" height="600">

        </canvas>

    </body>

</html> 

HTML5 Canvas Element Explanation 

The code above will be the base template for all of your future HTML5 Canvas projects.

We can define the height and width of the canvas tag using the height and width attributes,

just like we would with any other HTML tag.

Inside the initializer function we can access the canvas DOM object by its id,

and then get a 2-d context using the getContext() method.

HTML5 Canvas Line Example with Explanation

<!DOCTYPE HTML>

<html>

    <head>

        <style>

            body {

                margin: 0px;

                padding: 0px;

            }

           

            #myCanvas {

                border: 1px solid #9C9898;

            }

        </style>

        <script>

           

            window.onload = function(){

                var canvas = document.getElementById("myCanvas");

                var context = canvas.getContext("2d");

               

                context.moveTo(100, 150);

                context.lineTo(450, 50);

context.strokeStyle = "#ff0000"; // line color

context.lineWidth = 10;

                context.stroke();

            };

        </script>

    </head>

    <body onmousedown="return false;">

        <canvas id="myCanvas" width="578" height="200">

        </canvas>

    </body>

</html>

The moveTo(): It takes two argument, moveTo() method creates a new subpath for the given point. This point becomes the new context point. You can think of the moveTo() method as a way to position your drawing cursor.

The lineTo():It takes two argument, lineTo() method draws a line from the context point to the given point.

The stroke() method assigns a color to the line and makes it visible. Unless otherwise specified, the default stroke color is black.

The strokeStyle = “” To set the color of an HTML5 Canvas line, we can use the strokeStyle property of the canvas context.