The context object drawing functionality HTML5

arc(): The arc command draws an arc (portion of a circle) as part of a
path. The arc is defined like a circle, with a center and radius, but also with
beginning and ending angles. If the angles describe a full circle (0 to 2 × pi
radians), the arc command will draw a full circle. See the preceding example
for a custom circle function created from the arc command.

beginPath(): This command begins the definition of a path. Normally a
path is defined by a single moveTo command, followed by a series of
lineTo commands, and finished by a stroke, closePath, or fill.

closePath(): This command connects the last point of a path (drawn
with moveTo and lineTo commands) to the first, creating a closed shape
that can be filled.

drawImage(): The drawImage command allows you to draw an image (from
an external image file) on the canvas. Many implementations allow pixel-level
manipulation, allowing you to apply custom filters and transformations to
your images, which allows far more control than the typical <img> tag.

 fill(): The fill command (and its variants — like fillRect) allows you to
apply the current fill style to elements drawn on the screen.

 fillRect(): This command builds a rectangle of a specified size and
position, filled in with the current fill style.

fillStyle(): Allows you to specify the fill style. This can be a standard
color value, or a predefined gradient.

 lineTo(): This command (along with the moveTo command) allows you
to build a path on the screen. The lineTo command takes a point as input
and draws from a previously defined point to the current point. Note that
the path is not displayed until the application of the stroke function.

lineWidth(): This defines the width of the line being drawn by a stroke
command.

 moveTo: Used in path definition, the moveTo command is used to indicate
the starting point of a path.

stroke(): This command draws the currently defined path. Note that
paths are not immediately drawn; the stroke command actually draws the
path on the screen.
Related Posts:
  • How to Responsive web design Mobile Websites & Responsive Web Design from Go-MobileMobile Websites, Convert your existing website into a mobile device friendly format for your visitors & customers in just a few minutes.http://go-mobile.co… Read More
  • The svg element HTML5 The <svg> element allows the author to build a vector-based image directly in the page using the SVG markup language. <svg xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 … Read More
  • The html Element HTML5 Next up in any HTML document is the html element, which has not changed significantlywith HTML5. In our example, we’ve included the lang attribute with avalue of en, which specifies that the document is in English. In XHTML-… Read More
  • CSS and Canvas HTML5 As with most HTML elements, CSS can be applied to the canvas element itself to add borders, padding,margins, etc. Additionally, some CSS values are inherited by the contents of the canvas; fonts are a goodexample, as fonts d… Read More
  • Sectioning HTML5 Elements header :-Header content (for a page or a section of the page) footer:- Footer content (for a page or a section of the page) section:- A section in a web page article:- Independent article content aside:- Related content or p… Read More
  • Html Core Attributes Prior to HTML 4.0, few attributes could be used consistently for all the HTML tags. HTML 4.0 changed this, defining a set of 16 core attributes that you can apply to almost all the elements in both HTML 4.01 and XHTML 1.… Read More
  • The Doctype HTML5 First, we have the Document Type Declaration, or doctype. This is simply a way totell the browser—or any other parsers—what type of document they’re looking at.In the case of HTML files, it means the specific version and fla… Read More
  • Html Email Links An email link is just like a standard link, except that, instead of sending you to another page,  the link opens the associated email application so you can email the individual directly. Email links are especially us… Read More
  • The details Element HTML5 This new element helps mark up a section of the document that’s hidden, but canbe expanded to reveal additional information. The aim of the element is to providenative support for a feature common on the Web—a collapsible bo… Read More
  • video element of HTML5. The video element is one of the more anticipated features of HTML5. With this tag, developers will be able to embed videos into a Web page without requiring a plugin like Flash. <video src = “bigBuck.ogv” controls> Yo… Read More
  • Overview of HTML5 Canvas When you use a canvas element in your web page, it creates a rectangular area on the page. By default,this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and setother attributes f… Read More
  • The head Element HTML5 The next part of our page is the <head> section. The first line inside the head is theone that defines the character encoding for the document. This is another elementthat’s been simplified. Here’s how you used to do t… Read More
  • The context object drawing functionality HTML5 arc(): The arc command draws an arc (portion of a circle) as part of apath. The arc is defined like a circle, with a center and radius, but also withbeginning and ending angles. If the angles describe a full circle (0 to 2 ×… Read More
  • W3C node types Node type Numeric type value Description Element - Represents an element. Attribute - Represents an attribute. Text-3 Represents character data in an element or attribute. CDATA section - Represents text that may contain … Read More
  • A Basic HTML5 Template As you learn HTML5 and add new techniques to your toolbox, you’re likely goingto want to build yourself a blueprint, or boilerplate, from which you can begin allyour HTML5-based projects. In fact, you’ve probably already don… Read More