Canvas が使えるか?†
<script type="text/javascript" language="JavaScript">
<!--
if(window.HTMLCanvasElement){
window.alert("Canvas API を利用できます。");
}else{
window.alert("Canvas API は利用できません。");
}
-->
</script>
領域を指定し、赤い四角を描画する†
<canvas id="sample" style="border: 1px solid #000000;" width="200" height="200">ご利用のブラウザではCANVAS API が無効のためご覧頂けません。</canvas>
<script type="text/javascript">
window.addEventListener("load",
function() {
var canvas = document.getElementById("sample");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(20,20,50,50);
},
false);
</script>
Link†