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

Posted by Joseph Wasden
Joseph Wasden
20,406 Points

Troubleshooting my JS Fiddle - Failed to execute 'drawImage' when last canvas is enclosed (Not a Lesson question)

As part of learning more about JavaScript, I've begun searching for JSfiddles to read/improve on. I've recently forked a fiddle that converted a single <img> html element into a hex-shaped image, and decided to try and convert it into a 'hexify' plugin, where someone could just add the class 'hex' to any <img> tag and it would apply the styling.

I've run into a bit of a snag, however. The fiddle seems to work fine, however, if I enclose the last <img> tag in any kind of parent elements, it throws an error, saying that it can't draw the canvas element because it isn't a canvas element. I've debugged as best I can, and the type seems to be fine.

If you're up for a challenge, could you take a look at it and tell me what you think? I've included my work, and the link to the original jsfiddle.

original -- https://jsfiddle.net/josephwasden/whu4sed4/

current version -- https://jsfiddle.net/josephwasden/whu4sed4/17/#username

(Note: it doesn't seem to render in IE, and I haven't worked out a graceful degradation yet, but I intend too. Thanks for taking a look!)

Molly Brown
Molly Brown
2,371 Points

Hi Joseph!

If you open up Google Chrome's inspector, you'll see the issue is with this line:

ctx.drawImage(hexagon, 0, 0, canvas.width, canvas.height);

Specifically, that in at least one instance, hexagon is not a valid type. My guess is the adjacent sibling selector you use here:

var hexagon = document.querySelector('img[class=hex]+img[class=hex-template]');

Returns something you're not expecting after you add your div to the DOM.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

I can probably get a working version up for you; but I believe there are better alternatives to replacing all of your images with canvas elements. I believe they're not as accessible/user-friendly, are a little harder to work with, and likely require a little more work from your browser to render than a traditional image element.

See this CSS3 version: http://jsfiddle.net/kizu/bhGn4/

Joseph Wasden
Joseph Wasden
20,406 Points

Thanks for the answer Molly! You're right, it was indeed the selector issue.

I agree with you the pure CSS solution is more elegant. I'll be sure to use that in the future. I went this route as a learning exercise in JS, so I figured I'd try and make it work using as much JS as possible. :)