<canvas> element has a unique history. But we are not going to focusing on element history. The
<canvas> element takes a bit of work to understand and, unlike your usual run-of-the-mill HTML elements, requires more than just static markup and styling. In this guide, will start with basic understanding of the
canvas element and what kinds of things are required and expected in its associated code. This should help you to get a firm fundamental understanding of
canvas in preparation for creating something interesting and powerful with this unique and other HTML5 elements.
Maybe you heard about HTML 5 Canvas API, but don’t know what it’s good for? It’s the way to go if you want to code an HTML5 game? Or it gives you explicit control over drawing in your browser? So what does all that mean? Just what is the HTML5 Canvas API?
Let me pull back the curtain a little and give you some insight into what the HTML5 Canvas API is all about and what it can do for you and your web apps.
Here are just some of the capabilities at a glance:
- Defining Paths with lines, curves, arcs and more…
- Filling and Stroking Paths
- Clipping to a Path
- Filling and Stroking Text
- Affine Transformation (Translate, Scale, Rotate, Skew)
- Fills using Gradients and Patterns
- Pixel Manipulation
- Offscreen Rendering
- Rendering Blurred Shadows
- Dashed Lines, Line End Caps and Joins
- Exporting Canvas Rendering to a PNG or JPEG
First of all the HTML5 Canvas is a browser DOM object and can be added to your webpage either declaratively through the <canvas> tag or programmatically through the createElement method. Once defined it contains a frame buffer bitmap at screen resolution that is the same width and height of the canvas object itself.
As the element has some complexity so will start with markup.
<canvas id=”canvasId” width=”200″ height=”200″></canvas>
Above tag in your HTML page will create a canvas object on your page, that is 200 pixels width and 200 pixels height and it will be transparent. The DOM object associated with the canvas object doesn’t directly have any drawing methods. In order to actually draw on the canvas, you have to obtain a drawing context object by calling the canvas’s getContext method with a string parameter of “2d”.
//Get reference of canvas object
var canvas = document.getElementById(“canvasId”);
//Get reference of canvas 2d context
var context = canvas.getContext(“2d”);
//Display filled rectangle on screen
context.fillStyle = “rgba(0, 0, 255, .5)”;
context.fillRect(25, 25, 125, 125);
Drawing Rectangles and Paths
//Define path in the shape of triangle with the moveTo and lineTo methods
// Fill the path
You can get in details information about Colors, Styles and Shadows, Line Styles, Rectangles, Paths the drawing API information from the reference.
If the article helpful to you to understand basic idea about HTML5 canvas element than share your thoughts and take a look at the full canvas specification and experiment.
Enjoy RIA… 🙂
Facebook is great social web. Millions of active users and new users connect on Facebook platform through devices, applications and websites (refer the Statistics). As we know there is huge demand for content on the platform, the requirement for the platform developer also grown. So I thing learning material, perfect development approach guidelines or tips related to the platforms applications are most important.
The Flash Facebook Cookbook contains integrating Flash applications with Graph API and Facebook platform. It contains lots of recipes for that and recipes start with basic explanation of Flash-Facebook integration. If you have some knowledge of Flash Builder, Flex framework or Flash platform then it’s a nice book to explore your experience with world by Facebook platform.
Enjoy RIA 🙂
I had seen the declaration of Adobe about beta of Flash Professional CS5.
Personally, I think that for the person who has experience of software development field, it’s very normal known situation about release plans change. I believe only good features and functionality is the factors for which, developers are waiting.
You can get more information about Flash Professional CS5 from here.
Adobe make it possible to create applications for Apple iPhone using Adobe Flash Platform. So it provides a golden chance for flash developers and designers to get new users market using ActionScript 3.
You can enjoy the video regarding iPhone Applications.
You can get more information from here.
Enjoy RIA… 🙂
A new AIR application to provides environment to share project information including tasks, applications and instructions between designers, developers and project managers.
The application is developed using Adobe Flash Platform and Creative Suites 4 including Flash Builder 4 and so on.
You will get more information from here.
With the release of Silverlight a debate started among designers and developers regarding choosing between Flash and Silverlight. As I understands microsoft is faces difficulties in capturing the market due to maturity of Flash.
For developers and designers it’s important to think on technical features provided by Flash and Silverlight, to choose the technology that best suits your needs.
There are some important points described as below regarding the features comparison between Flash and Silverlight.
Flash use frame-based animation model. Silverlight is based on the WPF animation model which is time-based instead of frame-based.
Flash uses a compressed format, and text and images are embedded in movie, so flash file size is relatively small.
Silverlight uses XAML for its description language and it is non-compressed, so size of Silverlight component is usually larger.
ActionScript offers a set of sound classes that can be used to generate and control sound in a movie. While Silverlight dosen’t have the low-level audio APIs. It dosen’t support playback of WAV file because .NET has very little audio playback support.
Flash has webcam andmicrophone support for live video and audio transmission. While Silverlight dosen’t support webcam or microphone.
Friends, there are some others technical differences between the two technologies. As per me Adobe provides a nice features for attractive an effect applications development.
Enjoy RIA… 🙂