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?

Answer

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>

Leave a Reply

Your email address will not be published. Required fields are marked *