Canvasのメモリーリーク疑いについて
現在、Canvasを使ってペイントソフトにあるような「レイヤー」的な
ことが出来ないか実験をしています。
(レイヤー数に関しては、最大で24程度を考えています。)
環境等は、以下の通りです。
OS：Windows XP Pro(SP3) 32bit
メモリ:2GB
ブラウザ：各ブラウザの最新版(FireFox,Chrome,Opera,safariも実施予定です。)
実験の結果、大量のレイヤーを使用した場合に
ついてメモリーリーク的な問題が発生しているような感じがしています。
もちろん、レイヤーなのである程度のメモリ消費は承知の上だったのですが
タブを閉じた際や描画してから時間が経過してもメモリ使用量が減少しないのは
使用上問題がありますので質問させて頂くことになった次第です。
(なお、レイヤー数を削減すると、比例してメモリ使用量も削減されていました。
メモリ使用量に関しては、タスクマネージャのプロセスタブのメモリ使用量
で見ています。)
で、この問題が特に顕著なのが、Firefoxです。
私見では、1レイヤーにつき1MB程度消費してしまう感じです。
他のブラウザ(クローム、オペラ)では一時的にメモリ使用量は
増加しますが、時間が経過するとだいたい元にもどります。
なお、実験は以下のようなサンプルを作成して行っています。
(途中省略しています。)
ご教授して頂きたい点は、以下になります。
■メモリーリークが起きている場合の対処方法
(特にFirefoxにおける対処方法)
■Canvasを使用しない場合の代替案
宜しくお願い致します。
<html>
<head>
<script>
function draw() {
canvas = document.getElementById("g0");
if(!canvas || !canvas.getContext) return false;
ctx = canvas.getContext('2d');
ctx.font = "15px 'ＭＳ Ｐゴシック'";
ctx.fillStyle = "black";
ctx.fillText("aaa", 100, 100);
canvas = document.getElementById("g1");
if(!canvas || !canvas.getContext) return false;
ctx = canvas.getContext('2d');
ctx.font = "15px 'ＭＳ Ｐゴシック'";
ctx.fillStyle = "black";
ctx.fillText("bbb", 150, 150);
canvas = document.getElementById("g23");
if(!canvas || !canvas.getContext) return false;
ctx = canvas.getContext('2d');
ctx.font = "15px 'ＭＳ Ｐゴシック'";
ctx.fillStyle = "black";
ctx.fillText("eee", 300, 300);
}
function start() {
draw();
}
</script>
</head>
<body onload="start()">
<body onload="start()">
<canvas height="500" width="500" class="g" id="g0"></canvas>
<canvas height="500" width="500" class="g" id="g23"></canvas>
</body>
</html>
お礼
ありがとうございます。 上記「補足」の通りなので、刷毛塗りができるなら一番手軽かな、と思いました。絵の具には色々あるみたいなので、東急ハンズ等で訊いてみようと思います。 洗濯糊というとキーピングみたいなやつでしょうか。固さが落ちた場合に使えるなら有難いです。 http://www.live-science.com/honkan/jissen/starch.html
補足
補足です（下記「お礼」ご参照下さい） ・水には濡れない環境で使用する ・表面のみ着色ができれば、裏地はそのままで良い ・多少色落ちしても問題ない ・全部ではなく一部に着色したい