All geek questions in one place

How to make webkit free canvas contextual memory when the canvas is destroyed

The code below seems to be a memory leak with a rather alarming speed on the webkit (mobile safari and konqueror). I understand that the test case can be rewritten to reuse the canvas instead of creating a new one, but I wonder why the following does not work. Any insight would be appreciated.

<html>
<head>
<script>
function draw() { 
    var holder = document.getElementById("holder");
    holder.innerHTML = "<canvas id=cnv height=250 width=250>"; 
    var ctx = document.getElementById("cnv").getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(Math.random()*100,Math.random()*100);
    ctx.stroke();
}

function start() {
    setInterval(draw, 100);
}
</script>
</head>
<body onload="start()">
<div id="holder"></div>
</body>
</html>
+3
source share
2 answers

This problem occurs in Webkit even when the SRC image is modified, so I won’t be surprised if this happens when processing the canvas.

Chrome , Webkit, , , Chrome.

http://code.google.com/p/chromium/issues/detail?id=36142 https://bugs.webkit.org/show_bug.cgi?id=23372

, .

+3

  • <canvas> .innerHTML
  • <canvas>

Do

  • var cv = document.createElement('canvas'); cv.setAttribute('height', '250'); // ...
  • cv init !!
    <script>
            var holder = document.getElementById("holder"),
            var cv = document.createElement('canvas');
                cv.setAttribute('id', 'cnv');
                cv.setAttribute('height', '250');
                cv.setAttribute('width', '250');
                holder.appendChild(cv);

            function draw() {                     
                var ctx = cv.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(50,50);
                ctx.lineTo(Math.random()*100,Math.random()*100);
                ctx.stroke();
            }

            function start() {
                setInterval(draw, 100);
            }
    </script>
+1

Source: https://habr.com/ru/post/1789709/

More articles:


All Articles