For the first challenge, let’s start with an element that raise a lot of curiosity, the <canvas>. Your challenge is to create a little paint software. Don’t be afraid of the term, it’s simpler than you think: it’s a site that will give the opportunity to the user to open an image file, draw on it with the mouse, and save it after. Since the File API is pretty boring by itself, you’ll have to use it to accomplish your goal. The minimum requirements for this challenge are:
- Use File API to load an image;
- Load the image into a <canvas> element;
- Let the user draw black lines on the <canvas> with the mouse (like using a pen in paint software);
- Let the user save the new image (original image + black lines).
Of course, you can go crazy, and make a beautiful UI, add more color options, add more drawing tools… but since you’ll have only two weeks to do this challenge, concentrate on the initial goal first. At the end, you’ll have a better idea on how to use <canvas>, and the File API. So stop reading, and start coding! You have until May 2nd, as I’ll post the solution in two weeks.
P.S.: Special thanks to HTML5 Toronto who helped promote the idea.
More information on the HTML5 challenges
What are the HTML5 challenges?
Why only two weeks?
Whatever the time I’ll give, that will never be enough for some, and always too much for others. I thought that two weeks would be perfect as the challenge are not big one, and for me, it will give me enough time to squeeze this in my schedule. By that time, you’ll have to find how you’ll solve the challenge, read some documentation, create some functions, fix some bugs… and be successful!
Can I participate?
What can I win?
It will sound cheesy, but the satisfaction of learning something new, and build some little project by yourself. There is no prize, or leader board, as for me, everybody is a winner!
Is the solution you’ll give us is the ultimate one?
Of course not! I’ll give you a working solution, and a solution that makes the most sense with my actual knowledge. I’m the kind of person who think that there is always space for improvement, so I’ll be happy to discuss my solution if you don’t agree with it, or if you think there is a more efficient way to do it.
I have challenges suggestions, can I let you know?
I’ll be more than happy to know about those. Just leave a comment on one of the HTML5 challenge posts, and I’ll keep those in mind when I’ll post the next challenge. At the end, I want you to learn things that are relevant to you.
I find those challenges amazing, can I help?
There are three ways you can help:
- Participate is the first one. That sound weird, but if nobody is participating in the challenge, I won’t do them as the goal is to help people learn about the technology. By participating, you’ll show me that there is value in what I’m doing (other way, I’ll take this time to do something else);
- Suggest challenges. By suggesting new challenges, you’ll help me find interesting challenges to motivate people to learn about these technologies. Feedbacks on the challenges will always be welcome as I may find those really interesting, but it may not be the case for others;
- Promote the challenges by sharing them with your network. Whether it’s on Twitter, Facebook, LinkedIn, to a friend by emails, to the co-worker at work, in your user groups, sharing these challenges will help the first two points: participation, and more suggestions. At the end, it will help a bigger goal than these two one, it will help promote the standard, and good practice on the Internet, and that, is an amazing way to help the Web go forward.
Where can I find older challenges?
You can look on this blog for the tag “HTML5 challenges” and you’ll see all posts related to those: the introduction one, the challenges, and the solutions. Note that for now, since it’s the first challenge, you won’t find a lot of posts.