Monday, May 16, 2011

A Simple example of HTML5 with canvas

HTML5 with canvas, open with Google Chrome

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
function canvasloader(){
var mycanvas = document.getElementById("canvas");
var mycontext = mycanvas.getContext("2d");
mycontext.fillStyle = "#A0A0A0";
mycontext.fillRect(10, 10, 300, 220);
mycontext.fillStyle = "#00ff00";
mycontext.fillRect(20, 20, 200, 100);
mycontext.fillStyle = "#0000ff";
mycontext.fillRect(200, 100, 100, 100);
}
</script>
</head>
<body onload="canvasloader();">
<h1>Hello HTML5 canvas</h1>

<canvas id="canvas" style="border: 1px solid;" width="320" height="240">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>


next:
- Capture HTML5 canvas using JavaScript

No comments:

Post a Comment