CODEWITHSUNDEEP
javascriptcanvasmemorymemory-leaks
Daniel Bengtsson
Daniel Bengtsson

Reputation: 113

Huge memory leak in javascript

I'm working on a canvas element, and I thought I'd add some simple graphics elements, but for some reason they are grinding the fps to a halt. Without them it's 60fps, with them it slows down to 3-4 fps within a minute of it running:

ctx.rect(0, 0, cnv.width, cnv.height);
ctx.fillStyle = ctx.createPattern(albImg[8], "repeat");
ctx.fill();

ctx.lineWidth="1";
ctx.strokeStyle="#5d92de";
ctx.rect(173.5,638.5,623,98);
ctx.stroke();

What am I doing wrong?

Upvotes: 0

Views: 342

Answers (1)

markE
markE

Reputation: 105015

Animation slows with each new animation loop

@DanielBengtsson, Yes, as you've discovered, use strokeRect.

Alternatively, you can add ctx.beginPath before ctx.rect. What's happening is that all previous rects are being redrawn since the last beginPath so you are really drawing hundreds of rects as you animate.

// alternative with beginPath so previous rects will not redraw and
//     cause slowdowns.
ctx.lineWidth="1";
ctx.strokeStyle="#5d92de";
ctx.beginPath();
ctx.rect(173.5,638.5,623,98);
ctx.stroke();

Repeating Background Pattern -- wait for the image to fully load before trying to use it

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/emoticon1.png";

function start() {
  ctx.fillStyle = ctx.createPattern(img, "repeat");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>

Upvotes: 2

Related Questions