Hello, I'm Fred!

HTML5 challenge #1 - Canvas & File API

| 4 min read
Article main image for HTML5 challenge #1 - Canvas & File API

<figure>

Creative Commons: https://www.w3.org/html/logo/

<figcaption>

Creative Commons: https://www.w3.org/html/logo/

</figcaption>

</figure>

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:

  1. Use File API to load an image;
  2. Load the image into a <canvas> element;
  3. Let the user draw black lines on the <canvas> with the mouse (like using a pen in paint software);
  4. 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?

Every two weeks, I'll publish a little challenge on Web technologies around HTML (HTML5, CSS3, and JavaScript). My goal is to help people who want to learn the new features, and elements of the latest version of HTML, by setting some deadlines, but also, by focussing on clear little task. Across everything I'm doing, there is a constant feedback: people want to learn new technology, but they don't always have the time to work on big projects, don't have the patience of reading a full book, or just fail as there is no motivation. I hope that these challenges will motivate developers, and even non-developers people to learn about those.

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?

Everybody can participate! Keep in mind that it's not a step by step tutorial, but clearly a challenge with no more indication than the end result I want you to do. The goal here is to give you the latitude to create the solution by yourself, and learn where to find the right information. If you don't feel comfortable with a specific challenge, of course, nothing force you to do it, and you can wait for the solution to see how it works. At the end, there are enough sites talking about HTML, CSS, and JavaScript on the Web, that you can do it (by yourself, avoid copy pasting...)! On the other side, if you already know these technologies, why not validate your skills by doing those challenges. Also, we never use all the features of a technology, so you may come across something you don't know...

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:

  1. 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);
  2. 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;
  3. 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.