Applications, games, tools and tutorials for the HTML5 canvas element
Ed Mackey has created a function plotter application, which plots 2D maths functions on to a graph using canvas.
Graph plotting using canvas
The function plotter allows for scrolling, stretching and zooming with the mouse and will automatically rescale the grid lines. There are a variety of preset functions to try, or you can enter your own.
A threshold filter converts grayscale or color images into high contrast, black and white images. This threshold filter has been created with canvas by hitode909.
An example of what the threshold filter can do
Using the provided inputs, you can change the image converted and specify a level of threshold – all pixels lighter than this value are converted to white whilst all pixels darker are converted to black.
eTableSoccer is a cross between table soccer and pong – two games the creator, Hernan Amiune, loves.
The eagerly anticipated Canvas Champions Final - Blues v Purples
Players control the two blue paddles using the mouse as they attempt to score in the computer opponents goal (seen on the right) while protecting your own goal (on the left). There’s a timer one each game to keep things interesting and Facebook Connect is used to store the players rank.
Joshua Koo has used a mixture of jQuery and the canvas element to create a panning navigator, which allows for users to easily pan a large photo or image.
Browse the skyline with this panning navigator
Once the image has loaded (this may take some time as the images are quite large), drag the viewport in the navigator to move around the image using the mouse wheel to control zooming. Options are available to allow users to instantly fill the screen with the image, or fit the image so it is completely visible in the browser window.
iGrapher is a free web-based financial market visualisation tool for charting, analysis and prediction of different stock, currency and commodity markets. It uses canvas to draw the graphs of financial data.
Money, money, money...
To use, make some selections from the right hand menu and iGrapher will draw a graph comparing each selection. Hovering over the graph, you can find out the value of each of your selections on the highlighted date. You can expand the timeframe using the scrollbar at the bottom.
100pxls, created by Chris P, is an impressive HTML5 canvas demo which can load and save 10 x 10 pixel images using Twitter.
Using the search input at the bottom of the app, 100pxls will search Twitter for that term and return the results as a wall of tiny 10 x 10 pixel images. The application also allows you to draw a tiny image and post it to Twitter – using common words to encode and decode the tweet.
A fascinating use of canvas and Twitter
100pxls is part of the Mix 10K competition, so Chris P adds that if you like his app don’t forget to vote for him!
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
Submit your demo, and if we like it we'll feature it on Canvas Demos!
