Posted at

Androidの標準ブラウザでcanvasをクリアする方法

More than 5 years have passed since last update.


問題点

AndroidだとcanvasをclearRectしても、直前に描画したものが残っていることがあります


原因

この原因は、Androidの標準ブラウザで画面更新が起きないため、そのまま描画が残っていることが考えられます。

※AndroidChromeでは起きない


解決方法

window.clearTimeout(this.timerId);

//強制レンダリング
var $canvas = $('canvas');
$canvas.css('opacity',0.99);
this.timerId = window.setTimeout(function(){
$canvas.css('opacity',1);
},100);

opacityを変更することで強制的に描画させます。

この方法であればcanvas内のタップイベントなどがキャンセルされたりすることなくなります。