Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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