LoginSignup
10

More than 5 years have passed since last update.

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

Posted at

問題点

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内のタップイベントなどがキャンセルされたりすることなくなります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10