1

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});

        }
5
  • 2
    I have to ask: WHY do you need Canvas to draw a line 13000 pixels long? Commented Feb 19, 2013 at 19:52
  • Im building a character based website where as the user scrolls the character walks left to right and goes up elevators to other floors etc... Commented Feb 19, 2013 at 19:53
  • 2
    My experience in canvas is nonexistent, but: why don't you make a smaller canvas and scroll the background instead? Commented Feb 19, 2013 at 19:55
  • There we're plenty of ways I could have built the website but for what I need, the canvas path seemed the best solution at the time, It's also an experiment for me so I can see its capabilities etc and figure things like this out Commented Feb 19, 2013 at 19:56
  • 1
    I get the idea of experimenting, but this should already teach you that a single html tag with border-top will be a much better solution. As for the memory issue - you didn't post enough code for us to be able to find out what the problem is. You might be creating lots of canvases without knowing it, but it's much more probable that someone on the FF team didn't expect a canvas that wouldn't fit on any existing screen. Canvas should not be used this way. Commented Feb 19, 2013 at 20:18

2 Answers 2

1

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

Sign up to request clarification or add additional context in comments.

1 Comment

wooo, this just pushed me over 10k reputation :)
0

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.

1 Comment

Couldn't agree more, but It would be nice to have an answer here that analyzes the memory issue so that people will know if canvas can or can't handle 13000px. That's why I decided not to upvote this yet. [background:] In a software project I work on I once created a bug that rendered a canvas of 9000x2000 pixels and blured the whole thing after drawing some contents and it worked just fine (except it took about a minute on a good CPU).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.