htmlのレンダリングに関することで、canvas要素を３つほど連続して配置したときに謎の空白が下部に発生するのを確認した。意味がわからないのは、<!DOCTYPE html> を文書先頭に付加してhtml5として宣言するとこの空白が発生するということ。宣言を外せば空白は発生しない。
たとえばこんな感じで。
<div class="wrap"> <canvas id="top" width="550px" height="70px" style="display:block;background-color:rgb(41, 41, 41)"> <canvas id="middle" width="550px" height="70px" style="background-color:rgb(41, 41, 41)"> <canvas id="bottom" width="550px" height="70px" style="background-color:rgb(41, 41, 41)"> </div>
canvas要素というものはデフォルトでinline属性となっている様子。で、この問題を解決する場合はこのcanvas要素のスタイルにdisplay:blockを設定してあげれば下部の余白は解消される。DOCTYPE宣言の有無で表示が変わるのが意味不すぎてしばらくハマってしまった。
