HTML5 - Bringing Out Your Inner Artist: The Canvas(fillStyle method,fillRect method)

Head First HTML5 Programming
Building Web Apps with Javascript
(O'Reilly Media)
Eric Freeman (著), Elisabeth Robson (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• HTML5 (マークアップ言語)
• JavaScript (プログラミング言語)

Head First HTML5 Programming: Building Web Apps with Javascript(Eric Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)のChapter 7(Bringing Out Your Inner Artist: The Canvas)、PSEUDO-CODE MAGNETS(No. 4811)を解いてみる。

その他参考書籍

• Head First HTML and CSS

PSEUDO-CODE MAGNETS(No. 4811)

JavaScript (BBEdit, Emacs)

var drawSquare = function (canvas, context) {
        // calculate a random width for the square
        // calculate a random x position for the sqaure inside the canvas
        // calculate a random y position for the square inside the canvas
        // set the fillStyle to 'lightblue'
        // draw a square at position x, y with width w
        var w = Math.random() * 50,
            x = Math.random() * canvas.width - w,
            y = Math.random() * canvas.height - w;

        context.fillStyle = 'lightblue';
        context.fillRect(x, y, w, w);
    };

index4811.html