HTML5

JavaScript

Drawing an arrow


<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:0;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(100,100);
cxt.lineTo(100,90);
cxt.moveTo(100,100);
cxt.lineTo(90,100);
cxt.stroke();
</script>

</body>
</html>


Drawing a Circle like Japan's flag

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(150,100,55,0,Math.PI*2,true);//(x,y,radius,)
cxt.closePath();
cxt.fill();
</script>

</body>
</html>


Input

Still not very well supported. Use AJAX to check instead.

Enter email with auto check

<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>
</body>
</html>
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki