In this exercise, you will work a little with Raphaël to create SVG images from JavaScript code.

Creating an Image

Using the examples from lecture, or the Study Guide (Raphaël intro; code snippets), create an HTML page with the jQuery and Raphaël libraries loaded.

Use Raphaël to create an SVG image (400×400 pixles) on the page. (It won't really be visible until you start drawing on it. You could use CSS to give SVG images a border with a rule like svg { border: thin solid black; } .)

On the SVG “paper”, draw a snowman. Mine looks like this:

You'll need two functions to do this:

c = paper.circle(centre_x, centre_y, radius)
r = paper.rect(left_x, top_y, width, height)

And you'll need the .attr() function to set their 'fill', 'stroke', 'stroke-width' attributes.

Feel free to be more creative with your snowman than I was, but make sure he/she has a hat…

Changing It

Add a <button> element below the SVG (as examples from previous exercises have had). When the button is clicked, the hat (or at least some part of it) should get bigger.

To do this, you'll need to save the rectangle in a variable when it is created

hat = paper.rect(...)

And then when the button is clicked, use the .scale() function to scale it horizontally and/or vertically:

hat.scale(1.1, 1.0)

Here's my snowman's hat after a few clicks of the button, and scaling like the line above:

Submitting

Upload the files to the course web server, as you have before and make sure everything is working. You may want to create a folder exercise8. Submit the URL of your HTML page to the CourSys activity Exercise 8.