<html>
<head>
<title>Canvas demo</title>
<script type="text/javascript">
function draw () {
var canvas = document.getElementById ('hello');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect (25, 25, 50, 50);
}
}
</script>
<style type="text/css">
canvas { border: 2px solid red; }
</style>
</head>
<body onload="draw ();">
<canvas id="hello" width="100" height="100"></canvas>
</body>
</html>
HTML5의 Canvas 요소는 그래픽을 표현할 수 있는 요소입니다. 차후 Flash나 실버라이트를 부분적으로 대채할 수 있을 정도로 뛰어난 기능을 나타내는 것 같습니다.
JQuery로 유명한 존 레식이 참여하고 있는 Processing.js 보면 Javascript로 Canvas 요소를 쉽게 사용할 수 있습니다.
http://processingjs.org/
다만 아직 IE에서는 canvas 요소를 지원하지 않습니다. http://excanvas.sourceforge.net/ 를 이용해서 따로 별도의 자바스크립트를 추가해야 합니다.
http://hascanvas.com 에 가면 HTML의 Canvas 를 활용한 다양한 예제를 볼 수 있습니다.