【CSS】canvas領域にoverflow: hiddenを適用する方法

canvasを利用した際、何もしないとoverflow: hidden;を設定した親要素を飛び出して描画されてしまいますが、これを解決する方法があります。

デモ

https://jsfiddle.net/PJqXY/38

jsfiddleにデモがありましたので、こちらを見ていただくのが早いかと思います。

方法

overflow: hidden;を設定した親要素にtransform: translate3d(0,0,0);を追記することでえcanvas要素のはみ出しを除去することができます。

コード例

先ほどのjsfiddleのコードを紹介しておきます。

<div id="box">
    <canvas width="300px" height="300px"></canvas>
</div>

#box {
    ...
    overflow: hidden;
    transform: translate3d(0,0,0);
}

これだけになります。

まとめ

ちょっとした設定ですが、なんとなく記事にしてみました。

参考：https://jsfiddle.net/PJqXY/38