HTML5 in action: iPaint, iPaint Mobile, iPaintPro.

Ongoing projects

What's new?

jQuery Plugin: Canvas based Photoshop like color picker

Photoshop like Color Picker developed based on HTML5 <canvas> element. No transparent image tricks used.

Click here to view detail or download the full source code.

jQuery Plugin: EasyComment to any web page

It's a jQuery plugin that can be easily embedded to any web page to add commenting function. EasyComment really has nothing do to with any HTML5 features. But thought it might be useful to you.

Click here to view detail or download the full source code.

What we do ?

Basically we are here to embrace HTML5 but this is neither a place that collects a bunch of sites that claimed to be HTML5 site nor a site starts with telling you how to "hello world" a html5 site. What we are doing here is to utilize some of HTML5 new features in real applications that can never be done in HTML4 era.

Precisely speaking, we focus more on <canvas> element. In HTML4 era, we can implement a web application pretty much like an stand-alone application. The stand-alone application runs locally with data accessing locally (well, sometime remotely). It will maximize the usage of local resouces (CPU,RAM,Storage etc). But with today's faster internet connection, if you treat your web server just as a logical drive on your local system with data accessing using Ajax, it's pretty much the same structure as standalone application. But you do distribute some computing onto another system, the powerful server, to relief your local system somehow. However, there is one aspect that the browser can not do or at least with difficault to do, that is graphics/image processing. To display a static image using <img> element in a web page is nothing more than a picture viewer.

The problem is we need more than that: we need the ability to scale an image or just part of an image. We need the ability to rotate an image in any angle. We need a combined transform operation onto an image: translate, scale and rotate. We need draw vector gracphics like CAD applications. We need process raster graphics in pixel level like Photo Processing applications.

With <canvas> element boundled in HTML5, the dream comes true.

<canvas> element allows directly render graphics and images to the web page. It's pretty much the same concept from Java Graphics2D. This feature will definitely lead web development to the so-called next web generation, especialy graphic based applications. If you ever developed or tried to develop graphic-based web application, you will most likely have to choose Java Applet, Flash, or ActiveX control to accomplish the task. However, it's really painful when you have to consider security, compatibility and even performance issues. What if user disabled the java applet? What if user doesn't allow downloading your ActiveX? A lot of what-ifs you would have to address in your code. Some people try to use javascript to manipulate DOM element to mimic a drawing environment, like using one-pixel size <div> element to mimic a point, but the performance will definetely be a headache issue.

Latest Blog

RGB color model and HSL color model

The RGB color model is an additive color model in which red, green, and blue light are added together to produce many other different colors.

Typically, each channel are represented in the range of 0×00-0xff. In theory, there could be 256x256x256 different colors generated from this color model.

HSL color model is a common cylindrical-coordinate representations of points in an RGB color model. H stands for hue, people can understand hue as different colors, like red, green,blue or orange. S stands for saturation, we can understand saturation as adding gray onto colors. L stands for lightness, each color has it’s own lightness from darkest to brightest. [...]

Image Blending Algorithm – Part IV

This is the continuation of my series regarding digital image blending algorithms. If you want to read other posts in this series, here is the list just for your convenient: Image Blending Algorithm–Part I Image Blending Algorithm–Part II Image Blending Algorithm–Part III This post will bring in four more image blending algorithms: Linear Light, Pin [...]

Make Apps for iPod/iPhone/iPad using JavaScript

You do not have to have Mac machine and you do not have to join the Apple developer center, yet you can still develop apps for Apple’s i-devices. The following resources are great for beginners. The list will getting longer… … How to Make an HTML5 iPhone App Written by Alex Kessinger iPhone events [...]