Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Angelina Bethoney
Angelina Bethoney
117 Points
Posted by Angelina Bethoney
Angelina Bethoney
117 Points

Building A Dynamic jQuery Slider Using HTML5's Canvas

hi! i'm trying to build a slider on HTML5's canvas. I'm receiving this error:

Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

I understand that it's saying my URL is broken. The issue I'm having is that at some point in my code, my <img> tag changes, and I'm not sure why. Here's my code:

 $.map(ctrl.projects(), function( val, i ) {
           return m("li",
                                    m("img",{src: "http://www.angelina-marie.com/"+val.image[0].path.split(":").pop()+"", class:"portfolio-img" }),
                                    m("h4", val.title)

      )
})

This is mithril.js syntax. Basically just going through a collection of projects, and pulling out the image path and title. The data is stored in an <li> under a <ul#slideshow>.

        //slideshow
        $(function(){

            var slides = $('#slideshow li').children(),
            slideWidth = window.width;
            current = 0,
            images = [];
            var oImg;


            $.each(slides, function( val, i ) {

                var data = i,
                    oImg = new Image(200,200);
                    oImg.src = this.src;
                    oImg.title = this.innerHTML.split("<h4>").pop().split("</h4>");

                images.push(oImg);

                function moveLeft(){
                    console.log(images[current]) <= CONSOLE.LOG 1
                    current++;
                    if(current == $(images).length){
                        current = 0;
                    }
                    console.log(images[current]) <= CONSOLE.LOG 2
                    ctx.font = "30px Arial";
                    ctx.fillText(oImg.title,150,150);
                    ctx.drawImage(images[current], 10,11,150,103);
                };

                 $('.icon-chevron_left').click(function () {

                    moveLeft();
                });

                function moveRight() {
                    current ++;
                    if(current == $(images).length){
                        current = 0;
                    }
                    console.log(images[current].title)
                    ctx.drawImage(images[current], 10,11,150,103);
                };

                 $('.icon-chevron_right').click(function () {
                    console.log(images[current])
                    moveRight();
                });
            });


        })

this code controls my slideshow. So this is the issue here. Console.log 1 displays this:

<img width="200" height="200" src="http://www.angelina-marie.com/images/gansevoort_hotel_group_main.png" title="">

so the title is empty, but the path is there. Console.log 2 displays this:

<img width="200" height="200" src="undefined" title="Gansevoort Hotel Group Mobile Site">

now the path is undefined, but the title is there. Does anyone have an explanation as to why this is happening?