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 […]

By popular requests, we’have just added about half dozen of new custom rainbow palettes to Kaleidoscope Painter.  Check it out.  Hope you like the improvements.  As always, feel free to send us feedback and comments.  Have fun painting and coloring!

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 […]


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. […]

For your reference, here’s Part 1 and Part 2. If the example doesn’t work, it was because Part 1 and 2 uses the same variables. Open this guide as a separate page to fix it. Also remember that you need a browser that supports Canvas, such as Firefox 3. Before you start drawing lines, you […]

We learned how to create Canvas objects in Part 1, and we also learned how to draw a simple shape on Part 1. You need a browser that support Canvas such as Firefox 3 to run the examples.   Now it’s time to show how to crate a canvas that “overlays” your web-page. By overlay, […]

This is a guide of how to use HTML 5 Canvas, as well as some JavaScript/css tricks to enable drawing on top of a web page. To see the result of this tutorial, open Canvas introduction is covered here and here. You need a browser that support Canvas such as Firefox 3 to run […]


Here’s a silly demo I made with HTML 5 Canvas object. You need a browser that supports Canvas such as Firefox 3. Warning: you will need to use the browser’s Back button to navigate away from the page. See the tutorial.

This example uses Canvas to flip an image.  For introduction to Canvas, please see With Canvas, developers gains the access to pixels data of any images loaded.  To flip an image, we can iterate every row of the image and copy the pixels backward. Please upgrade your browser function flipImage(image) { var myCanvas=document.createElement(“canvas”); var […]