CANVAS Art Index
So, the original intent of this web page was to showcase digital artwork that was created using the HTML-5 canvas tag.
Things like this representation of the Earth and Mars looking towards the sun:
Or this - which is one of the more annoying things I have seen on a website:
I ordered this HTML 5 Canvas book which I thought would help me to to make nice pictures. Instead, I learned that the Canvas is more than just a 2-dimensional vector drawing program, but by using Java Script the canvas tag allows for user interactivity for stunning animations, applications and games. If you click on the book cover, a new window will open for the Amazon.com page on the book for further information and ordering details.
One of the first examples in the book is the "guess-a-letter" game. That illustrates some of the possibilities with a simple game. The user just needs to guess a letter from 'a' to 'z' and the web page will reply if the mystery letter is higher or lower.
Click here to play.
Note: in the book on page xviii of the preface under "Using Code Examples," the authors state that:
In general, if this book includes code examples, you may use the code in your programs and documentation. You do not need to contact us for permission unless you are reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O'Reilly books does require permission.
The next program I borrowed (heavily) from the book was called "Text Arranger." The idea behind this page is to show the infinite ways that the Canvas Text API can display text by allowing the user to change any number of parameters including the text itself. Here is some text I arranged. You can see how the text color changes from magenta to purple, the while fill around the text and the blurred grey shadow:
Click here to see the Text Arranger Application.
I then took the concepts in those programs and tried to use them in my own application that would allow the user to create their own works of abstract art. The application basically allows the user to create a canvas back, either solid or a three color gradient. The user then can pick from one of several fill shapes or user defined size and color to overlay the background. I tried to simplify the application by removing the hexadecimal code for colors and replacing them with sliders and also by using more user friendly terms (such as transparency instead of alpha). Once the user has created something they like, they can click the create data image button and the canvas will create a picture they can save as a .png or .jpg on their computer. Here is a sample I made and then overlaid with some text using gimp to make a relief map.
You can draw your own abstract art by clicking here.
Finally, I create a small gallery of images that I created from the application.
Click here to see the abstract art gallery using a frames based page.
Click here to see the abstract art gallery without frames.