Illustration of HTML element "Canvas" that draws figures with JavaScript

AJAX using JavaScript was attracting much attention until the first half of last year, but the JavaScript itself which became the root was old for a while, and AJAX is characterized by a very strong aspect like a new application method.

However, the "Canvas" element introduced this time clearly distinguish it from that. It is possible to draw graphs, synthesize photos, animate, etc., and in fact it has been introduced for the first time in Mac OS X Dashboard. Therefore, the supported browsers are Safari and Firefox 1.5 or later Gecko 1.8 based browser, then Opera 9. Also, this "Canvas" element is said to be part of WhatWG Web applications 1.0 specification also known as "HTML 5".

And since I think that I do not know the actual feeling even if I write it variously, let's see various examples.
First a simple frame. However, moving the mouse upwards will make it move. This is the power of the Canvas element.

Decorative borders and the Canvas


Next is the rendering of 3 dimensional space. Use the cursor keys to move, you can jump with the space key. This smoothness is amazing. There is a small map on the upper left, which is also linked. It seems that you can really make a game with this.

Canvascape - 3D walker


The version of the texture pasted on the wall is below. Truly it is heavy.

Canvascape - "Experimenting With Textures"


It is also possible to randomly lay out images. Click the image on the right to change the image to be spread.

XTech Canvas Demo


You can also do things like drawing boards. Please draw with the mouse.

Scribble


It is possible to further evolve such drawing as well.

Canvas Painter


Next is an MSX emulator that combines JavaScript and Canvas elements. It is heavy so it is almost benchmarked, but it certainly moves.

JsMSX - The first MSX emulator 100% written in Javascript


Next is football,Opera's widgetIt is famous as, but this also works with the browser. Since your team moves to the position you clicked, please do your best. It is showing the aspect of a real-time strategy game. To be able to make things so far ... is amazing. Moreover, since the author lives in Japan, it is in Japanese.Author's blogIt is written that it does not want to return to Sweden, so it is considerable Japanese trading.

Unreal Soccer


nextplasmaGeneration of pattern. What can you do with this ... ....

Projects Plasma Demo


And block breaking. There were many similar block breaks up to now, but the smoothness of movement is incorrect.

Pixel Instrument - Siti internet, applicazioni e assistenza


This color generator also uses Canvas.

ColorJack: Color Generator


An example of the graph is below.

What the heck is canvas?

PlotKit - Javascript Chart Plotting | liquidx

It also consumes a lot of time and CPU resources, but you can also create Mandelbrot shapes. When completed it is very beautiful.

Canvas mandelbrot

Life games can also be created.

Arto Bendiken | Conway's Game of Life in JavaScript

You can make familiar Pong every time.

Canvas Pong Example

For the Canvas element, Mozilla's tutorial is detailed.

Canvas tutorial - MDC