[JavaScript] fillRectがうまく動作しない

dic · #1

JavaScriptでつまづきました。
fillRect(0,0,300,300)で正方形を描画したいのですが、
fillRect(0,0,300,150)の長方形が描画されてしまします。
(0,0,300,300)の中心に円を描画したいと考えています。
どこが悪いところがないか調べてもらえないでしょうか？

コード:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>上図を描画する</title>
    <style>
        #clock {
            width: 300px;
            height: 300px;
        }
    </style>
     <script> var ctx, x = 150, y = 150;
     function gobj(id) {
        return document.getElementById(id);
    }

    function init() {
        var canvas = gobj("canvas");
        ctx = canvas.getContext("2d");
        paint();
    }

    function paint() {
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, 300, 300);
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.arc(x, y, 30, -Math.PI / 4, Math.PI / 4, true);
        ctx.fill();
    }
    </script>
</head>
<body onload="init()">
    <canvas width="300" hegiht="300" id="canvas"></canvas>

</body>
</html>

Chome でも Internet Explorerでも同じでした。

#2

canvasにhegihtという謎の属性は設定されているが高さを指定するheight属性は無いので、高さがデフォルトの150ピクセルになっているようです。
従って、上から150ピクセルの部分とそれより下の部分は描画されません。
canvasの高さを十分大きく設定するといいでしょう。

canvas 要素 - HTML | MDNより引用

height
CSS ピクセルで示した座標空間の高さ。デフォルトでは 150 ピクセルに設定されています。

dic · #3

>>みけＣＡＴ様
私のタイプミスでした。
hegiht から　height に変更したところ　３００ｘ３００の正方形が描画されました。

Visual Studio 2015 commity でタイプミスをなるべく気づくようにしているのですが、
hegith　でもエラーが表示されずに今回の問題が起こってしまったようです。
コンパイラ型ならエラーがでるんですが、なかなか JavaScript は神経使います。

解決しました。

		8月 2025
日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

[JavaScript] fillRectがうまく動作しない

[JavaScript] fillRectがうまく動作しない

Re: [JavaScript] fillRectがうまく動作しない

Re: [JavaScript] fillRectがうまく動作しない