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 jQuery Basics (2014) Creating a Simple Drawing Application Perfect

Posted by Sako Kassabian
Sako Kassabian
13,796 Points

Planning on taking the simple drawing app further (collaborators welcome)

I'm looking to build a soccer tactic creator using what I have learned from the jQuery basics course. I know there are a few out there already, but this is mainly so that I can practice my programming skills and also use it for my soccer team.

I have a question as I have started on the project.

  1. How do you add a background to the canvas element? I am trying to add a soccer field to it as a background, but have not been able to thus far.

If anyone wants to collaborate on this project, you can respond here. Would definitely like some server side help with storing already created tactics so that users can share them.

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Please share the project when you're done! This'll be a great project to see come together.

Sako Kassabian
Sako Kassabian
13,796 Points

Will do Andrew!

1 Answer

James Mallon
James Mallon
8,536 Points
James Mallon
James Mallon
8,536 Points

In the CSS file change the background value of canvas to whatever you want like below. I have changed it look more like a blackboard.

canvas { background: #599457; display: block; margin: 50px auto 10px; border: 20px solid #EBD47A; border-radius: 5px; box-shadow: 0 4px 0 0 #222; cursor: url(../img/cursor.png), crosshair; }

Sako Kassabian
Sako Kassabian
13,796 Points

James, setting the background via css does not work. I was researching a little bit and what was recommended was positioning an img element behind the canvas element

James Mallon
James Mallon
8,536 Points
James Mallon
James Mallon
8,536 Points

Setting the background with a url works fine for me. Heres the code http://codepen.io/C4P0/pen/Bnktr