Question

Rectangles

You can use relativePos to find the corner corresponding to the start of the mouse drag. Figuring out where the drag ends can be done with trackDrag or by registering your own event handler.

When you have two corners of the rectangle, you must somehow translate these into the arguments that fillRect expects: the top-left corner, width, and height of the rectangle. Math.min can be used to find the leftmost x-coordinate and topmost y-coordinate. To get the width or height, you can call Math.abs (the absolute value) on the difference between two sides.

Showing the rectangle during the mouse drag requires a similar set of numbers but in the context of the whole page rather than relative to the canvas. Consider writing a function findRect , which converts two points into an object with top , left , width , and height properties so that you don’t have to write the same logic twice.

You can then create a <div> node and set its style.position to absolute . When setting positioning styles, do not forget to append "px" to the numbers. The node must be added to the document (you can append it to document.body ) and also removed again when the drag ends and the actual rectangle gets drawn onto the canvas.

Color picker

You’ll again need to use relativePos to find out which pixel was clicked. The pixelAt function in the example demonstrates how to get the values for a given pixel. Putting those into an rgb string merely requires some string concatenation.

Make sure you verify that the exception you catch is an instance of SecurityError so that you don’t accidentally handle the wrong kind of exception.

Flood fill

Given a pair of starting coordinates and the image data for the whole canvas, this approach should work:

1. Create an array to hold information about already colored coordinates.

2. Create a work list array to hold coordinates that must be looked at. Put the start position in it.

3. When the work list is empty, we are done.

4. Remove one pair of coordinates from the work list.

5. If those coordinates are already in our array of colored pixels, go back to step 3.

6. Color the pixel at the current coordinates and add the coordinates to the array of colored pixels.

7. Add the coordinates of each adjacent pixel whose color is the same as the starting pixel’s original color to the work list.

8. Return to step 3.

The work list can simply be an array of vector objects. The data structure that tracks colored pixels will be consulted very often. Searching through the whole thing every time a new pixel is visited will take a lot of time. You could instead create an array that has a value in it for every pixel, using again the x + y × width scheme for associating positions with pixels. When checking whether a pixel has been colored already, you could directly access the field corresponding to the current pixel.

You can compare colors by running over the relevant part of the data array, comparing one field at a time. Or you can “condense” a color to a single number or string and compare those. When doing this, ensure that every color produces a unique value. For example, simply adding the color’s components is not safe since multiple colors will have the same sum.

When enumerating the neighbors of a given point, take care to exclude neighbors that are not inside of the canvas or your program might run off into one direction forever.

This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but they contain a lot more hidden complexity and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.