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

HTML jQuery Basics (2014) Creating a Simple Drawing Application Preparation

Thomas Joseph Meneses
Thomas Joseph Meneses
9,838 Points

Graceful Degradation on a <canvas>-Heavy Web App

Although I do agree that graceful degradation is indeed a major principle of web development, I just can't see how useful its application would be to a web app whose functionality heavily relies on technologies (e.g. the <canvas> element) that would break most older browsers.

But hey, we are problem solvers. =) Let's give it a shot.

Let's first try to define "graceful degradation" in the case of this drawing app. Clearly, support for the <canvas> element is non-negotiable; without it, you've got essentially a glorified color picker! Other than that, the core function of this app would be the act of drawing lines with different colors onto the canvas.

Now, one would think that JS functionality is also a mandatory requirement, since the implementation of line drawing is quite closely integrated with mouse events. It would also be the most intuitive implementation of a drawing app. Disabling JS in the case of graceful degradation would remove our ability to draw directly with our mouse.

Even without the mouse event handling provided by JS, though, we can at the very (very) least maintain the app's core function of putting custom-colored lines on the canvas. The only other implementation I can imagine is through further controls for coordinate-placing, line-stroking, and path-starting and -ending, using further form controls. Basically, we're looking at emulating the mouse with <input>s.

Another vital feature that JS provides us is dynamic DOM (and CSS) modification and placement. Without JS, we can't edit the canvas at all... on the client side. jQuery Basics is, after all, part of the PHP Development track, so I'm sure anyone reading this would know what I'm implying: submit the new line as form values to the server, where PHP (or any other server-side language) will plug into the <canvas> and return to the user.

Of course, drawing lines this way is quite cumbersome for anything greater than simple line drawings. In fact, it may take someone 10x the time or even more just to achieve the same thing a user with JS (mouse events, client-side DOM manipulation) can draw.

In the spirit of graceful degradation, the app's core function of drawing lines would be preserved. On that note, though, let's also hope their patience gracefully degrades as well. =P

1 Answer