HTML5 Canvas Drawing App (Part 4/6)

Official site

Twitter

[AndrewErhardt]

Your comment helped. It was a severe oversight on my part. I got it to work now. Thank you!

[McGavel]

Cool, thanks again for the great vid.

Another thing my teacher taught me was about *floating elements*.

When you have a floating element (let's say a *floating <li> within an <ul> for a horizontal navigation menu*), the key to making the floating elements act correctly is to make the parent container that holds them have the style attribute of *overflow: hidden*

E.X. CSS:

*nav {*
   *overflow: hidden;*
*}*

*nav ul {*
   *float: right;*
   *overflow: hidden;*
*}*

*nav ul li {*
   *float: left;*
*}*

[fredericoluisfigueira]

Please more videos about canvas, your videos is very good!

[McGavel]

Cool stuff about caching the *.length* directly in the *for loop* and also cool about using *.swatch.active* syntax to refer to an element that has both classes. Thanks!

[McGavel]

Also, cool point about how the *eventListener* always passes the callback function the event object as its first parameter. (*target*)

[DaBananaboat]

This will be Oliver's most powerful tool ever.

[RoandDesign]

Try this: First refresh the page. You should check if your updated javascript file has been loaded in the browser. (using firebug or developer tools) Also, you could be using an outdated browser, or you could have made an typing error. Hope this helps.

[funkymaniak]

Make sure you're changing both the context.fillStyle and the context.strokeStyle properly

[AndrewErhardt]

I'm having some issues with styling the swatch balls. They won't appear unless I put text in the div. Does it for both Firefox and Chrome. I triple checked my code to make sure it matched yours and it doesn't work!

[funkymaniak]

Make sure you haven't deleted the 'colors' div that contains the swatches. The script still needs a place to stick the swatches it produces.

[Linili]

First your videos are very good... you did a great job.

but I have one tiny problem, when I click to draw a point... it works but the point is not right unter my mouse, it's underneath.

[funkymaniak]

Sounds like your width and height properties aren't doing their thing.

Best to check everything's hooked up first. Check the way you're declaring classes in the markup and check the selector in the css. Then make sure your width, height and display properties are written properly.

Hope this helps

[McGavel]

I decided to also create the "active" class when we created the others in the for loop. I just added:

if (i == 0) {
        swatch.className = "swatch active";
    }
    else {
        swatch.className = "swatch";
    }
}

[_Mackan]

I have this line in my main.js: var color = "black";
Without that, the lines are messed up..

[jinoreki]

to those who got the error "TypeError: is not a function" try changing the "var swatches = in your colors.js

[Buuza]

There is a little bug. Canvas doesn't catch mouseUp outside itself, click and move mouse all the way down, unclick and move mouse back..

[larssonk]

what happened to your Java for beginners videos? :(

[coolguy]

my swatches dont show up unless i put a space or a letter or somthing please help :(

[utsavsharma]

Somehow I am unable to add eventListener to swatch elements. I wrote the code correctly but on checking in element inspector there were no event listeners attached. What could be wrong?

[ivaseder]

at first, it is amazing tutorial! Does anybody know how to find source which fantastic presenter write like poems?