background preloader


Facebook Twitter

HTML 5 canvas - the basics. By Mihai Sucan Table of contents Introduction The HTML5 specification includes lots of new features, one of which is the canvas element.

HTML 5 canvas - the basics

HTML5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a "context" (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Most of the major browsers include the 2D canvas context capabilities - Opera, Firefox, Konqueror and Safari. This article takes you through the basics of implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more. Note that you can download all the code examples in a single zip file, as well as viewing them live using the links below.

The basics of using canvas Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML document like so: That's your drawing pad created, so now let's put pen to paper. Paths Text. HTML5_Canvas_Cheat_Sheet.png (1388×1027) 10 Essential Firefox Plugins for Web Developers. A few most necessary and essential web development related Firefox Utilities are being shared today.

10 Essential Firefox Plugins for Web Developers

You might already know that Firefox is currently the most popular web browser among Web Development circles, this is because Firefox is fast, secure, reliable, but one thing that asserts Firefox’s supremacy over the rest is the Utilities that can be plugged into it. This post is about a few of these utilities and tools which would vividly boost a developer’s productivity. They range from designing to validation and optimization. A brief intro about all of the tools is written right here, but for further details, kindly visit the source. Let’s Start Web Developer Advanced Dork Console 2 Mason Firebug Flashbug. Ask HN: Why is HN HTML laid out in tables? HTML5 Demos and Examples. Dive Into HTML5. Tryit Editor v1.4. What's New with HTML 5: Global Attributes -

Introduction to HTML 5 In the new world of HTML 5 some things will remain the same, some will go away and many will be added.

What's New with HTML 5: Global Attributes -

In this article we will take a look specifically at what's new with the global (sometimes called standard) attributes. Global attributes are those attributes that apply to all HTML elements. About HTML 5 Attributes For those new to HTML, attributes are the parts of HTML elements that define them. Global attributes in HTML 4 were designed to be universally applied to all HTML elements.

Some Things Remain the Same The genuinely global attributes from HTML 4 included in HTML 5 are the same in both versions of HTML. Accesskey – Use this attribute to indicate a keyboard shortcut key. But Many Things are New The global attributes of HTML 4 were fairly easy and straight-forward in their naming and function.

Contenteditable – This is one whose function is suggested by its name. Conclusion The new additions to the global attributes in HTML 5 are just a tip of the iceberg.