The example code will often build on functions and variables that were

introduced earlier in the text.

(((sandbox)))The online coding sandbox for the book

(http://eloquentjavascript.net/code[_eloquentjavascript.net/code_])

sure to first download the full code from this chapter from the

sandbox page.

== The weresquirrel ==

endif::html_target[]

pass:[\begin{equation}\phi = \frac{n_{11}n_{00}-n_{10}n_{01}}{\sqrt{n_{1\bullet}n_{0\bullet}n_{\bullet1}n_{\bullet0}}}\end{equation}]

The notation (!html _n_~01~!)(!book pass:[$n_{01}$]!) indicates the

number of measurements where the first measurement (pizza) is false

// → … five turns of moving critters

----

The first two maps that are displayed will look something like this

(depending on the random direction the critters picked):

in the online version of the book at

http://eloquentjavascript.net[_eloquentjavascript.net_].

ifdef::html_target[]

endif::html_target[]

----

############################ ############################

############################ ############################

----

(((stability)))(((reproduction)))(((extinction)))(((starvation)))Most

of the time, the plants multiply and expand quite quickly, but then

</html>

----

This is what such a document would look like in the browser:

image::img/home-page.png[alt="My home page",width="6.3cm"]

(((angular brackets)))The tags, wrapped in angular brackets (“++<++”

and “++>++”), provide information about the ((structure)) of the

</script>

----

image::img/blockquote.png[alt="A blockquote with attribution",width="8cm"]

== Attributes ==

<script>highlightAllCode();</script>

----

image::img/highlighted.png[alt="A highlighted piece of code",width="4.8cm"]

(((getAttribute method)))(((setAttribute method)))(((className

property)))(((class attribute)))There is one commonly used attribute,

</script>

----

image::img/boxed-in.png[alt="A paragraph with a border",width="8cm"]

[[boundingRect]]

<p><a href="." style="color: green">Green link</a></p>

----

image::img/colored-links.png[alt="A normal and a green link",width="2.2cm"]

(((border (CSS))))(((color (CSS))))(((CSS)))(((colon character)))A

style attribute may contain one or more _((declaration))s_, which are

<strong style="display: none">not at all</strong>.

----

image::img/display.png[alt="Different display styles",width="4cm"]

(((hidden element)))The `block` tag will end up on its own line, since

((block element))s are not displayed inline with the text around them.

</script>

----

image::img/cat-animation.png[alt="A moving cat head",width="8cm"]

(((top (CSS))))(((left (CSS))))(((centering)))(((relative

positioning)))First, the picture is centered on the page, and given a

</script>

----

image::img/drag-bar.png[alt="A draggable bar",width="5.3cm"]

(((mouseup event)))(((mousemove event)))Note that the `"mousemove"`

handler is registered on the whole ((window)). Even if the mouse goes

</script>

----

image::img/help-field.png[alt="Providing help when a field is focused",width="4.4cm"]

(((focus event)))(((blur event)))The ((window)) object will receive

`"focus"` and `"blur"` events when the user moves from or to the

</script>

----

image::img/game_simpleLevel.png[alt="Our level rendered",width="7cm"]

(((link (HTML tag))))(((style sheet)))(((CSS)))The `<link>` tag, when used

with `rel="stylesheet"`, is a way to load a CSS file into a page. The

</script>

----

image::img/canvas_fill.png[alt="A canvas with a rectangle",width="3cm"]

After creating the context object, the example draws a red

((rectangle)) 100 ((pixel))s wide and 50 pixels high, with its top

</script>

----

image::img/canvas_stroke.png[alt="Two stroked squares",width="5cm"]

(((default value)))(((canvas,size)))When no `width` or `height`

attributes are specified, as in the previous example, a canvas element

</script>

----

image::img/canvas_path.png[alt="Stroking a number of lines",width="2.1cm"]

(((canvas)))(((stroke method)))(((lineTo method)))(((moveTo

method)))(((shape)))The example creates a path with a number of

</script>

----

image::img/canvas_triangle.png[alt="Filling a path",width="2.2cm"]

This draws a filled triangle. Note that only two of the triangle's

sides are explicitly drawn. The third, from the bottom right corner

</script>

----

image::img/canvas_quadraticcurve.png[alt="A quadratic curve",width="2.3cm"]

(((stroke method)))We draw a ((quadratic curve)) from the left to the

right, with (60,10) as control point, and then draw two ((line))

</script>

----

image::img/canvas_beziercurve.png[alt="A bezier curve",width="2.2cm"]

The two control points specify the direction at both ends of the

curve. The further they are away from their corresponding point, the

</script>

----

image::img/canvas_arc.png[alt="Two arcs with different radii",width="2.3cm"]

(((canvas)))(((arcTo method)))(((lineTo method)))The `arcTo` method

will not draw the line from the end of the rounded part to the goal

</script>

----

image::img/canvas_circle.png[alt="Drawing a circle",width="4.9cm"]

(((moveTo method)))(((arc method)))(((path, canvas)))The resulting picture

contains a ((line)) from the left of the full circle (first call to

</script>

----

image::img/canvas_pie_chart.png[alt="A pie chart",width="5cm"]

But a chart that doesn't tell us what it means is not very helpful. We

would like to have a way to draw text to the ((canvas)).

</script>

----

image::img/canvas_scale.png[alt="A scaled circle",width="6.6cm"]

(((mirroring)))Scaling will cause everything about the drawn image, including the

((line width)), to be stretched out or squeezed together as specified.

</script>

----

image::img/canvas_tree.png[alt="A recursive picture",width="5cm"]

(((save method)))(((restore method)))(((canvas)))(((rotate method)))If

the calls to `save` and `restore` were not there, the second recursive

endif::html_target[]

(((game,screenshot)))That concludes the new ((display)) system. The

resulting game looks something like this:

image::img/canvas_game.png[alt="The game as shown on canvas",width="8cm"]

[[graphics_tradeoffs]]

== Choosing a graphics interface ==