Today's Question:  What does your personal desk look like?        GIVE A SHOUT

SEARCH KEYWORD -- Canvas



  Simple Animation in the HTML5 Canvas Element

HTML5 is generating all kinds of buzz these days. Some of the buzz is about HTML5 being a replacement for Adobe’s Flash. I don’t think it’s there yet but it’s certainly on the way to changing the way content is presented on the web. This is a description of a very simple animation in an HTML5 canvas element. It is coded for readability and not for optimized operation. We’ll add a canvas element to a web page and then use javascript to draw on it. We will...

   HTML5,Canvas,Animation,Sample code     2011-07-01 10:20:08

  Capture video stream with WebRTC

WebRTC(Web Real-Time Communication) is an API supporting real time audio and video communication through a browser. It is now a recommended W3C standard. This post is to show you how to capture video stream and screenshot with WebRTC. Capture video stream To play video stream from the video camera, we first need to put a video tag in our code: <video id="video"></video> The main function to get the video stream is the navigator.getUserMedia, as of now only few of the browsers support...

   WebRTC,Video,Screenshot     2013-10-24 21:04:41

  HTML5 photo taking and uploading app implementation

Underthe support of HTML5 standard, Building Web App to take photos is now possible.I will elaborate on how to take photos using Web App, display them on the pageand upload them to the server. 1.     Videostream HTML5 TheMedia Capture API provides the programmable  access to video camera on phones, users canuse the getUserMedia() method to get the video stream provided by video camera.What we need to do is to add a HTML <video> tag and make the videostrea...

   HTML5,Photo taking,Media Capture API ,Implementation     2012-03-15 07:19:49

  10 HTML5 Demos to Make You Forget About Flash

You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have a place, especially for developing complex games and rich internet applications. If you’ve yet to see what HTML5 can do, I’ve rounded up 10 demos that show off some of its capabilities. So what do you think – will HTML5 replace Flash? Canvas ...

   HTML5,CSS,Next web,Flash     2011-07-01 10:13:19

  PHP to get access token for Facebook app

Since Facebook is now using OAuth 2.0 to authenticate apps to access user information. the SDK of Facebook has provided developers some useful functions to get authentication done. For example, in PHP SDK, there are getAccessToken(), getLoginUrl() etc. But unfortunately, for me I cannot use getAccessToken() method to get the user access token, it only returns me the app access token. Finally I gave up this approach to get access token for the time being. I may later retry this approach if I have...

   Faceook,PHP,Access token,signed request     2012-03-27 12:37:46

  Going Fullscreen with Canvas

As notes in the Release Notes, Firefox Aurora introduced the Fullscreen API. This means that it will appear in the release version of Firefox in about 3 months.This is one of several features that will be fantastic for games on the web. Other exciting APIs are theGamepad, Canvas, and Audio. Some of these APIs still need work to be suitable for real-time games, but it’s a great time to be involved in building games for the web.I wanted to try out the Fullscreen API so I...

   HTML5,Canvas,Full screen,2D,Drawing     2011-11-22 08:37:23

  How to Create Custom Textures using Filters & Layers?

Textures are an important and integral part of the design world. You would find textures in every nook and corner of your life, in every space across your home. For a long time people have looked at Photoshop as a tool to manipulate photos and make them look the way you want it to appear. But, that’s not all to Photoshop. You can create interesting textures, and create amazing design works using Photoshop too. All you need is a design hand, and some basic understanding of how to use it. He...

   Photoshop     2014-08-01 05:46:07

  VIM Plugins for C/C++ developers

Following up on my previous post on Essential Vim Plugins for Web Developers, I have decided to tell you about the awesomeness of the C / C++ plugin for Vim in this article.Now to get things going, let’s start by thinking what are the basic stuffs that you would be carrying out as a C / C++ developer? Include header files, some functions, loops, conditional statements and a main function. These are some repetitive boring tasks that you would rather have someone else do it for you. We...

   Plugin,Vim,C,C++,developer,Vim for C     2011-09-28 09:23:55

  HTML5 History of 20th Century Music

We've seen some neat interactive HTML5 infographics before -- but the periodic table, for example, doesn't really care that much about time.Visual representation of time introduces numerous complications. Traditional ways of representing time visually were, roughly speaking, translations of dimension-type, from temporal to spatial; the mapping selected would depend on what kind of temporal relation was meaningful for the particular application. For example, circles represent cyclical beha...

   HTML5,JavaScript,Music,Timeline     2011-12-16 09:35:55

  Javascript motion tracking

It is very often that I have to do video motion tracking for interactive video campaign in my daily work. If I’m used used to do that in Flash, I made a quick experiment to do the same in javascript. Thanks to Olof Storm who made me a perfect corner pin motion tracking in After Effects, and I’ve been using some code from Steven Wittens to draw an image in perspective. Click here to see the motion tracking demo (give it a bit of time to fully load). What I’m doing in this dem...

   JavaScript,Motion tracking,Flash     2012-03-20 07:43:46