This tutorial builds upon the previous tutorial at /2010/10/html5-saving-canvas-image-data-using-php-and-ajax, with additional explanation on how to pass parameters along with the canvas data. We will demonstrate methods of saving the content of a HTML5 Canvas object using server side scripting. PHP will be used in this example, but the technique can be applied in other languages as […]

One of the things that I played around several years ago was the GD library, which allows image manipulations and creations on the server-side. I have always want to automate repetitive things such as creating glossy-icons for web-pages.  Basically I want to automate the process of converting: From this To this: I wasn’t sure if […]

Sample WebM Video 2
November 16, 2010

Below is a sample WebM video encoded with Wildform Flix which is a FREE WebM encoder. You need a HTML5 enabled browser and browsers that support WebM videos. And while at it, why not read WebM Overview.   Which browser can see this video? You can use the The latest build of Chrome to view […]

This is a general outline of how to utilize HTML5 Canvas to do animation using the traditional cell-animations, aka: image-strips. Here’s the image that I am using for this example; as you can see, it consists of 8 frames of equal width. It’s an animation of someone walking, shows in a top-down view. To draw […]

In this tutorial, we will demonstrate methods of saving the content of a HTML5 Canvas object using server side scripting. PHP will be used in this example, but the technique can be applied in other languages as well. This post requires understanding of Javascript, HTML (especially forms and/or AJAX). PHP is used in the example […]

WebM is the new media-container format announced by Google during the Google I/O conference this year. For a broad overview of WebM, see this post: http://www.permadi.com/blog/2010/05/webm-overview/ WebM is based on MKV (Matroska) container format, which uses EBML structure to store informations, tagging and organizing data in hierachial tree-like structure.  EBML is a basically binary version […]

Sample WebM Video
May 19, 2010

Below is a sample WebM video encoded with Wildform Flix which is a FREE WebM encoder. You need a HTML5 enabled browser and browsers that support WebM videos. And while at it, why not read WebM Overview. Which browser can see this video? I tested playback with these Chromium builds (Chromium is the base of […]

WebM Overview
May 19, 2010

On, February 19, 2010 Google finalized its acquisition On2 Technologies, the creator of the VP8 codec, the codec used in WebM. (On2 (formerly The Duck Corporation) was also the company which created VP6, the video codec used in Adobe FLV2 format.) On May 19/20 during the Google I/O Developers Conference in San Francisco, Google released […]

Download the Free software from Wildform (currently Windows only).  Check for updates, Flix WebM will also support 2-pass encoding in the near future. Open the input video (this video should be playable on your computer as Flix uses codecs installed in your computer to read the video).  Almost all format are supported: WMV, MOV, AVI, […]

Chrome is shaping up to be the best browser around.  It’s fast and it is developer-friendly, with its own Firebug-like tools.  Under View->Developer->Developer Tools you can find the goodie. See below for screenshot. The Element inspector can be accessed with the Magnfying Glass icon on the bottom, and then you can hover your mouse to […]

Here are some samples and brief explanation of HTML5 Canvas text related functions. A HTML5 compliant browser (such as Firefox 3.5) is required in order for the examples to work. Basic Text   Use strokeText or fillText, both takes x, y and maximumWidth. The colors are determined by the fillStyle and strokeStyle <script language=”JavaScript”> function […]

HTML

Building from Part 1, 2, and 3, we’re now ready to create a canvas overlay that sits above a html page, and where user can draw on.  Here are the steps that we will use: Step 1: Create the canvas. Step 2: Create a function that draws on the canvas based on the mouse position. […]