Archive

Archive for the ‘Information’ Category

HTML5 Canvas Element Guide

August 12, 2013 Leave a comment

HTML5 <canvas>

The HTML5 <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.

The HTML5 Canvas API is a procedural drawing API for JavaScript.  It’s well supported in all major browsers including Internet Explorer (starting with version 9) and is defined by the HTML5 Canvas W3C specification.

Also from Wikipedia you will get the detailed definition of <canvas> element as:

“Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.”

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

The context object returned contains the actual drawing APIs that allow us to draw on our canvas object.  The 2D context allows for the use of a number of different drawing methods and properties, each utility syntax familiar to experienced CSS and JavaScript developers.

//Define path in the shape of triangle with the moveTo and lineTo methods
context.beginPath();
context.moveTo(400,50);
context.lineTo(50,400);
context.lineTo(400,400);
context.closePath();

// Fill the path
context.fillStyle="red";
context.fill();

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… 🙂

Flash Facebook Cookbook Review

December 5, 2011 Leave a comment

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.

Flash Facebook Cookbook by James Ford, is one more information source for Facebook Developers. I received a copy of this book and while reading it, I would like share review of the book.

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 🙂

Adobe Flash CS5

December 19, 2009 Leave a comment

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 Social Service To Develop Social Applications

October 31, 2009 Leave a comment

Adobe had released a service to use a single set of APIs to integrate your application with social networks including Facebook and MySpace. Developers can easily develop social applications by using the APIs and also these services are insulates developers against underlying social network changes, the service adopts to those changes so as a developers you need not have to take tension to update your application. 🙂

Developers can get information, to use the new API to develop social network application, from here.

You can download the Social Service Library from here.

And as usual environment provided by Adobe to share the social application development problem at here.

Enjoy RIA… 🙂

Adobe Flash CS5 Applications for iPhone

October 24, 2009 Leave a comment

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… 🙂

Adobe WorkflowLab

October 22, 2009 Leave a comment

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.

Flash vs Silverlight : What Suits Your Needs Best ?

October 21, 2009 Leave a comment

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.

Animation

Flash use frame-based animation model. Silverlight is based on the WPF animation model which is time-based instead of frame-based.

File Size

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.

Sound Precessing

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.

Webcam 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… 🙂