一部Androidの標準ブラウザでclearRectすると描画がおかしくなる

環境

端末: ARROWS Tab F-02F
OS: Android4.2.2
ブラウザ: ブラウザ

現象

Canvasでのアニメーション作成時に、フレームごとにCanvasサイズでclearRect()を掛けていたところ、ある瞬間からページ全体の描画がおかしくなる。

原因

before.js

canvas.width = 980;
canvas.height = 300;
setInterval(function(){
    ctx.clearRect( 0, 0, canvas.width, canvas.height )
}, 1000/30);

上のようにCanvasサイズぴったりにclearRect()を使うとこういった現象がおこるようです。

対策

clearRect()のサイズをcanvasサイズぴったりにしなければいい

after.js

canvas.width = 980;
canvas.height = 300;
setInterval(function(){
    ctx.clearRect( 0, 0, canvas.width+1, canvas.height+1 )
}, 1000/30);

これで無事にAndroidでの描画がおかしくなることがなくなりました。

参考サイト

ハマったこと：AndroidにおけるCreateJS/Canvasのバグ