質問: JavaScript初心者です。 本で勉強中に下記の練習用コードがあったのですが、『縁取りした三角形が描画される』と記載されているにも関わらず、どのブラウザでも下図のように三角形が黒く塗りつぶされて描画されてしまいます。 私が入力したものではなく、書籍添付のサンプルコードでその現象が起こるので、本で記載されている内容が古いのか、間違いなのか、描画結果が正しくて単なる本の誤植なのか、もっと他に原因があるのかがわかりません。 どなたかお時間がある方、コードに間違いがあればご指摘お願いします。 できれば、後学のため原因などを説明していただけるとより助かります。 ![画像の説明をここに入力](https://i.stack.imgur.com/s8974.png) ``` ```
回答: 少しばかりの誤植があるようです。 ``` ``` `fillStyle`や`strokeStyle`で色指定をする場合にはCSSの色要素として有効な文字列を指定しますが、それにはセミコロン(;)は含まれません。 もしかしたら世の中に存在するありとあらゆるブラウザを試せばそのような余分な文字を無視してくれるものがあるかもしれませんが、手元のSafari, Firefox, Chromeではそのような動作にはなりませんでした。不正な文字列と言うことで、塗り潰しも輪郭線もデフォルトの黒で描画されてしまうようです。 書籍にも検索トップに出てくる有名サイトにもそう言った間違いが入ることはあり得ます。公式のリファレンスの記述なども参考にして見直してみると、自分でそこら辺を見つけられるかもしれません。