JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のcanvasが歪む・伸びる原因と対処法【width/height属性の正しい指定方法】

HTML5で<canvas>要素を使った際、描画した図形や画像が「伸びていたり」「潰れていたり」と歪んで表示されることがあります。この問題は、CSSでサイズを指定していることや、width属性・height属性の指定が不適切であることが主な原因です。

この記事では、canvasが歪む原因と、その解決方法を実例付きでわかりやすく解説します。

canvasが歪むときはwidth属性とheight属性を見直そう

canvasが歪んで表示される場合は、まずwidth属性とheight属性を明示的に指定してみてください。

<canvas id="canvas1" width="400" height="300"></canvas>

ポイントは、CSSではなくHTMLの属性として直接指定することです。canvas要素のwidth・height属性は、単なる見た目のサイズではなく「描画領域（バッファ）の解像度」を決めるものだからです。

canvasのデフォルトサイズは300×150

HTML5において、canvas要素にサイズを指定しない場合のデフォルト値は以下の通りです。

width = 300
height = 150

つまりデフォルトでは幅300px × 高さ150px（2:1の比率）になっています。ここにCSSで任意のサイズ（例：width: 100%; height: 500px など）を指定すると、描画バッファ（300×150）が引き伸ばされて表示されるため、図形や画像が歪んでしまうのです。

実装例：正しくサイズを指定したcanvas

以下は、width属性とheight属性を明示的に指定したシンプルなサンプルコードです。

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas {
  border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>

表示結果

HTML5のcanvasが歪む・伸びる原因と対処法【width/height属性の正しい指定方法】

この例では、100×100ピクセルの正方形のcanvasを作成し、赤い枠線を付けて表示しています。属性で正しくサイズを指定することで、意図した通りの比率で描画領域が確保されます。

まとめ

  • canvasが歪む主な原因は、CSSによるサイズ指定や、width/height属性の未指定。
  • canvasのデフォルトサイズは300×150（2:1）。
  • 歪みを防ぐには、HTMLのwidth属性・height属性で描画サイズを明示的に指定するのが基本。

レスポンシブ対応が必要な場合は、JavaScript側でclientWidthなどを取得してcanvasのwidth/height属性を動的に設定する方法も有効です。ぜひ試してみてください。

  1. HTML5のcanvasタグとは？グラフィック描画の基本と使い方を解説

    HTML5で新たに導入された<canvas>タグは、JavaScriptなどのスクリプト言語を使って、図形・グラフ・アニメーションなどをWebページ上に直接描画するための要素です。画像ファイルに頼らず、動的でインタラクティブなグラフィック表現を実現できる点が大きな特徴です。 canvasタグの基本的な書き方 まずは、width属性とheight属性を指定したシンプルな<canvas>要素の例を見てみましょう。idやclassといったHTML5の共通属性も通常どおり組み合わせて使用できます。 <canvas id=myCanvas width=100 heigh

  2. HTML5でCanvas（キャンバス）を中央に配置する方法を徹底解説

    HTML5で<canvas>要素を画面の中央に配置する最もシンプルな方法は、canvasタグを<div>タグで囲み、そのdivに対して中央揃え（text-align:center）を指定することです。親要素であるdivが中央に配置されると、その中にあるcanvasも自動的に中央に表示されます。基本的な実装例<!DOCTYPE html> <html>    <body>       <div style=text-align:center;