Coding with Chrome's JavaScript API

Coding with Chrome is a new Google application that's built to help people learn how to code.  It supports Blockly, CoffeeScript, Pencil Code, and JavaScript.  It's free to download and works right your the Chrome browser.

I've been working on some educational material for the new application.  One of the things I really like about it is that it provides a really simple drawing API so you can easily code shapes and drawings instead of starting off with the command line.  Since the application gives you an immediate response, you're able to experiment and see how changing your code affects the picture on the screen.

Here's what I've learned about the basic drawing API.  You can download this file and try experimenting with the code yourself.


/*
 * draw.clear() clears the screen.
 */
draw.clear();

/*
 * draw.point(x, y, color, size) draws the specified point on the screen in the
 * specified color.
 *
 * @param {number} The X-coordinate for the point.
 * @param {number} The Y-coordinate for the point.
 * @param {string} The color for the point. Can be specified as a named color
 *                 or as a hexadecimal color code.
 * @param {number} The size of the point (extends downward and to the right).
 */
draw.point(2, 2, 'purple', 10);

/*
 * draw.rectangle(x, y, width, height, fillcolor, strokecolor, stroke) draws a
 * rectangle on the screen.  The (x, y) coordinate specifies the top-left corner
 * of the rectangle.
 *
 * @param {number} The X-coordinate for the rectangle.
 * @param {number} The Y-coordinate for the rectangle.
 * @param {number} The width of the rectangle.
 * @param {number} The height of the rectangle.
 * @param {string} The fill color of the rectangle. Can be specified as a named
 *                 color or as a hexadecimal color code.
 * @param {string} The stroke color of the rectangle.
 * @param {number} The width of the stroke line.
 */
draw.rectangle(20, 200, 200, 300, 'red', 'green', 5);;
draw.rectangle(100, 400, 40, 100, 'gray', 'black', 1);

/*
 * draw.triangle(x1, y1, x2, y2, x3, y3, fillcolor, strokecolor, stroke) draws
 * a triangle connecting the three points specified.
 *
 * @param {number} The first X-coordinate for the rectangle.
 * @param {number} The first Y-coordinate for the rectangle.
 * @param {number} The second X-coordinate for the rectangle.
 * @param {number} The second Y-coordinate for the rectangle.
 * @param {number} The third X-coordinate for the rectangle.
 * @param {number} The third Y-coordinate for the rectangle.
 * @param {number} The width of the triangle.
 * @param {number} The height of the triangle.
 * @param {string} The fill color of the triangle. Can be specified as a named
 *                 color or as a hexadecimal color code.
 * @param {string} The stroke color of the rectangle.
 * @param {number} The width of the stroke line.
 */
draw.triangle(20, 200, 220, 200, 120, 20, 'blue', 'green', 5);

/*
 * draw.ellipse(x, y, width, height, fillcolor, strokecolor, stroke) draws a
 * ellipse on the screen, with the (x, y) coordinate at the top-left corner of a
 * a hypothetical rectangle that encloses the ellipse.
 *
 * @param {number} The X-coordinate for the ellipse.
 * @param {number} The Y-coordinate for the ellipse.
 * @param {number} The width of the ellipse.
 * @param {number} The height of the ellipse.
 * @param {string} The fill color of the ellipse. Can be specified as a named
 *                 color or as a hexadecimal color code.
 * @param {string} The stroke color of the ellipse.
 * @param {number} The width of the stroke line.
 */
draw.ellipse(70, 260, 40, 60, 'cyan', 'white', 2);
draw.ellipse(170, 260, 40, 60, 'cyan', 'white', 2);

/*
 * draw.circle(x, y, radius, fillcolor, strokecolor, stroke) draws a
 * circle on the screen, with the (x, y) coordinate at the center of the circle.
 *
 * @param {number} The X-coordinate for the circle.
 * @param {number} The Y-coordinate for the circle.
 * @param {number} The radius of the circle.
 * @param {string} The fill color of the circle. Can be specified as a named
 *                 color or as a hexadecimal color code.
 * @param {string} The stroke color of the circle.
 * @param {number} The width of the stroke line.
 */
draw.circle(132, 450, 5, 'white', 'black', 1);

/*
 * draw.line(x1, y1, x2, y2, strokecolor, stroke) draws a line connecting the
 * two specified points.
 *
 * @param {number} The first X-coordinate for the line.
 * @param {number} The first Y-coordinate for the line.
 * @param {number} The second X-coordinate for the line.
 * @param {number} The second Y-coordinate for the line.
 * @param {string} The stroke color of the line. Can be specified as a named
 *                 color or as a hexadecimal color code.
 * @param {number} The width of the stroke line.
 */
draw.line(100, 500, 80, 700, 'black', 1);
draw.line(140, 500, 160, 700, 'black', 1);

/*
 * draw.text(text, x, y, color, drawSmall, drawOutline) draws text on the screen
 * at the specified point. The point marks the bottom-left corner of the text 
 * to be drawn.
 *
 * @param {string} The text to be drawn on the screen.
 * @param {number} The X-coordinate for the text.
 * @param {number} The Y-coordinate for the text.
 * @param {string} The color of the text. Can be specified as a named
 *                 color or as a hexadecimal color code.
 * @param {boolean} If true, draw smaller text.
 * @param {boolean} If true, draw only an outline of the text (no fill).
 */
draw.text('HOUSE', 300, 200, 'black', false, true);