CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Liam
Liam

Reputation: 9855

Javascript memory leak - Canvas HTML5 jQuery

Im building a website that uses canvas primarily, the only cannvas involved however is a line thats drawn horizontally, the line is about 13000px long.

When the user scrolls my window then scrolls horizontally along m canvas path, Example.

Ive notived that on firefox (version 6.0.2) my document fails to scroll. In my console I receive something along the lines of (NS_ERROR_OUT_OF_MEMORY).

After googling this I've found that it could be a potential memory leak? How does this work, is it because of the way I've written my code? or is this a browser/hardware issue?

Im re-initisalising my function on window resize etc and I'm curious as to whether this may have any imapct? 

// Initate the plugin

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    $("#path").scrollPath({drawPath: true, wrapAround: false});
});

$("#path").scrollPath({drawPath: true, wrapAround: false}); 

        $(document).ready(init);

            $('.wrapper').css({'top' : '0px','left' : '0px'});
            $('.wrapper > div').css({'height' : + $(window).height() +'px'});

        function init() {


        // Set window height and width variables 
            var windowheight = $(window).height(); 
            var windowwidth = $(window).width(); 

            // Check monitor size and workot if incentives needs extra space etc 
            var bff = 4020 + (1993 - windowwidth);

            // Move divs into position 
            $('.culture').css('top', + - windowheight + 'px');
            $('.careerpath').css('top', + - windowheight + 'px');
            $('.training').css('top', + - windowheight + 'px');
            $('.apply').css('top' , + - windowheight + 'px');



            /* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */

            $.fn.scrollPath("getPath")
                // Move to 'start' element
                .moveTo(0, 0, {name: "div"})
                .lineTo(2400, 0, {name: "div1"})    

                .lineTo((bff-550), 0, {name: "div2"})

                .lineTo(bff, 0, {name: "div3"})

                .lineTo(bff, -windowheight, {name: "div4"}) 

                .lineTo((bff + 1993), -windowheight, {name: "div5"})

                .lineTo((bff + 1993 + 1837), -windowheight, {name: "div6"}) 

                .lineTo((bff + ((1993 + 1837 + 1795) - 325)), -windowheight, {name: "div7"})    

            // We're done with the path, let's initate the plugin on our wrapper element
            // Window resize function
            $(window).resize(function() {
                if(this.resizeTO) clearTimeout(this.resizeTO);
                this.resizeTO = setTimeout(function() {
                    $(this).trigger('resizeEnd');
                }, 500);
            });

            $(window).bind('resizeEnd', function() {
                $("#path").scrollPath({drawPath: true, wrapAround: false});
            });

            $("#path").scrollPath({drawPath: true, wrapAround: false});

        }

Upvotes: 1

Views: 977

Answers (2)

naugtur
naugtur

Reputation: 16915

Ok, now that I googled for the plugin you used I know what is going on.

http://joelb.me/scrollpath/

The "line" is in fact a shape and the scrollPath is generating a nice big canvas for that. The problem is inside the scrollPath stuff. It creates too many canvas instances or leaks something.

You should trace/document the bug a bit better and report it to the author.

The suggestion to create the path from a single DOM element is invalid now that we know you didn't mean a single straight line. I have no idea what is your trget exactly, but you might be able to achieve it with impress.js

Upvotes: 1

Alex Wayne
Alex Wayne

Reputation: 186994

You're doing it wrong. This approach will lead to nothing but pain.

I don't think you have a leak, you simply have a memory hog of a program. And other than memory you will also have huge performance issues with this. 2D canvas is heavily affected by fillrate (number of pixels drawn). Drawing this many pixels will be incredibly slow, even on fast computers.

So do NOT make a gigantic canvas and then scroll the window/viewport over it. Instead, make a small canvas, which renders only the visible portion of a bigger thing.

Upvotes: 0

Related Questions