Mockups and Canvas (Part 2)

Aug 9, 2010
Episode 36
In this week's episode, Nick compares two ways to create mockups and Jim goes into part 2 of a canvas tag tutorial.

Thanks to those who make Doctype possible!


Hi-Fi Mockups

There’s a lot of debate in the design community about high fidelity mockups versus low fidelity mockups. Here are two contradictory viewpoints...

Some designers like to make hi-fi mockups in Photoshop or any other image editing tool that include every last detail and visual frill that will be included in the final site design. There are many advantages to this.

For one, you know exactly what the final site should look like before you get started. Two, it’s sometimes easier to see the interactions between various design details. And lastly, it’s easy to show off your idea to others.

In some situations it’s best to make a high fidelity mockup for business purposes. One of your clients or the company you work for might prefer to give final approval on a design before it’s actually turned into HTML and CSS.

High fidelity designs also provide you with many of the image assets that you’ll need when constructing the final site. You would have make these images anyway, so why not just make them during the mockup stage?

Low-Fi Mockups

Now that we’ve seen the advantages of high fidelity mockups, let’s take a look at the other end of the spectrum.

Low fidelity mockups can be created with wireframing tools like Balsamiq, Mockingbird, or better yet, just a pen and paper. In fact, some designers like to use a large permanent marker instead of a pen because it naturally forces you to draw at a lower resolution with less detail.

Lo-fi mockups also allow you to iterate on a design much faster and get straight into HTML and CSS. This can be hugely advantageous in many situations, especially in agile workflows.

High fidelity mockups done in Photoshop can be slow to create, and they can often times prevent you from working on interactivity and the flow of interaction. With low fi mockups, you get to the code faster so that you can model the functionality, and you leave the details for last.

So, what’s the verdict? Should you go with high fidelity or low fidelity mockups? The truth is, it depends on your situation and what you’re comfortable with. If you need to show clients or your team lots of detail early on, a hi-fi mockup might be best. If you’re more concerned about functionality and flexibility, then break out the paper and markers.

Canvas Shapes

Drawing rectangles using the canvas is very easy, but we can draw more interesting shapes by using paths. Drawing paths is kind of like drawing with a pen. You can draw paths from point to point, and pick up your pen and move it to another point.

The first thing we want to do is call the beginPath method on our canvas’s context object. This means that this is the beginning of our paths, and any strokes or fills we apply in the future will only be applied to the instructions after the beginPath call.

The first thing we can do is call ctx.moveTo(x, y), and pass it an X and Y, this is like picking up your pen and placing it somewhere on your paper. Then we can call ctx.lineTo(x, y) to extend our path from our current position, to a new position. This doesn’t actually put pixels on the canvas, but it creates a path that you can stroke, and/or fill.

If we do another ctx.lineTo() to a new point, our path will now consist of two line segments. To make this into a closed shape, we could make our next lineTo’s destination the same as our origin from our first call, but we can use the closePath, which will create a line to the first point in the path.

Now we can use the ctx.stroke() method to apply a stroke to our path, it will use the most recent stroke style. We could also apply a fill by calling ctx.fill().

If we had not closed our shape, our fill would look the same. Filling an unclosed shape will fill the area of the shape that would have been filled, had you called closePath.

If we stroke it, however, we can see the shape is not truly closed.


We can draw circles, or arcs on the canvas using the arc method, It can be a bit confusing at first, but once you get the hang of it, you can build some pretty cool shapes;


Your geometry and trigonometry classes can finally be put to use when working with arcs and lines in the canvas.

The arc method looks like this

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

Imagine we want to draw a circle. First we choose the center of our circle, in our case 200, and 150, or the center of our canvas, then we need to determine the radius. I want my circle to be 200 wide, so the radius is half of that.

Next we need to choose what part of the imaginary circle defined by the x,y, and radius we want to draw. Since we are deawing a full circle, the start angle and end angle are going to be at the same point, but 360 degrees apart.

The angles, though, are measured in radians. If you were paying attention in trig, you may remember a full circle is 2 times pi radians. So we can multiply 2 times Math.PI. You could also write a function that converts degrees to radians like so:

function deg2rad(degrees){
  return (Math.PI/180) * degrees;

Finally the anticlockwise argument determines which direction the stroke should be drawn about the radius, clockwise being false, and anticlockwise being true. It doesn’t matter for a full circle.

When we define our start and end angles, 0 is the positive X direction relaive to our origin, or to the right of our origin. This is probably what you are used to from school.

However, as the angles increase to the positive, they circle clockwise, so that 90 degrees, or half pi radians, is actually below the origin, not above.

This is confusing at first, but remember, the origin for our canvas is at the top left, and positive Y goes downward, contrary to most graph paper assignments taught in school. So 90 degrees is still Y-positive compared to the origin, but since the Y axis is inverted compared to what we are used to, Y-Positive is now below, not above.

We can stroke a quarter rotation by setting start to 0, end to 0.5 Pi, and setting anticlockwise false

If we wanted to have our shape look slices of pie, we could moveTo the center before our arc is drawn, then call close shape after. This will create implied lines from the center, to the arc, and back again.

ctx.arc(5, 6, 4, 0, 0.5 * Math.PI,true);

Mess with the start and end angles, colors, and you might find a familiar figure.

Try combining lines rectangles and arcs and show us what cool scenes you can build in the comments.