まくまくJavaScriptノート
ウィンドウサイズに応じて HTML5 Canvas のサイズを変更する
下記のサンプルでは、クライアントサイズの変更（ブラウザウィンドウのサイズ変更）に応じて HTML5 Canvas のサイズを設定しています。 Canvas のサイズをクライアントサイズほぼいっぱいに表示されるように調整し、その中にその半分の大きさで矩形を描画しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Canvas サイズの動的変更のデモページ</title>
<style>
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<canvas id="my_canvas" />
<script>
window.onload = function() {
var canvas = document.getElementById("my_canvas");
var ctx = canvas.getContext("2d");
function fitCanvasSize() {
// Canvas のサイズをクライアントサイズに合わせる
canvas.width = document.documentElement.clientWidth - 10;
canvas.height = document.documentElement.clientHeight - 10;
// Canvas 全体を塗りつぶし
ctx.fillStyle = "rgb(191, 255, 191)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Canvas サイズに合わせて矩形を描画
var w = canvas.width / 2;
var h = canvas.height / 2;
ctx.fillStyle = "cyan";
ctx.fillRect(10, 10, w, h);
}
fitCanvasSize();
window.onresize = fitCanvasSize;
}
</script>
</body>
</html>
