HTML5 Canvas Paint App for iPhone

While working on a project I created this simple HTML5 Canvas Paint application for mobile touch devices. It runs on mobile safari (iOS touch devices) and also runs on android devices, since both have web-kit browsers. The code is very simple. JavaScript touch events have been used to listen to user’s touch movements on the screen and then the co-ordinates of the move are recorded for drawing. Also I have a clear button to clear everything on the Canvas and redraw. No multiple color support for drawing is there in the app as of now. You can see a screenshot of the app below, ignore my drawing though, it’s too bad. After the screenshot, the full code is provided.

Click to open the demo.

Read More »

Adding reflections using CSS3

Now with CSS3 we can add reflections to HTML elements in webkit based browsers. Not only that, the reflection moves with the element, say if your element is moving or animating the reflection also moves along it, giving it a nice visual appeal. Here is a quick example of adding reflections. The effect is very nice and looks similar to flash based reflection effect that I used to do by replicating movie clips and masking.


http://jbk404.site50.net/css3/reflection/
Read More »