Square Shooter, by Felix Pleșoianu, is a shoot ‘em up which doesn’t seem to involve many squares. You play a circle space craft and must shoot the hollow bubbles to proceed to the next level. Sqaures appear from time to time to offer power ups. The game is rendered on one canvas element using text functions where available and is ~650 lines of Javascript.
Shoot those bubbles!
Felix’s instructions say to click the mouse to shoot in that direction, and hold the mouse button briefly to accelerate; but I found mysellf flying all over the place as shooting was also moving me in that direction. The best way to avoid certain death seemed to be to click close to your own spaceship (within 20 pixels) which would fire the shot and move you slowly forward.
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.
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
