HTML5 - Bringing Out Your Inner Artist: The Canvas(path, beginPathmethod, moveTo method, lineTo method, closePath 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)、EXERCISE(No. 4953)を解いてみる。

その他参考書籍

• Head First HTML and CSS

EXERCISE(No. 4953)

HTML5 (BBEdit, Emacs)

<style>
  canvas { border: 1px solid black;}
</style>    
<canvas width="600" height="200" id="triangle">
  <p>Plead upgrade your browser.</p>
</canvas>
<p>
  <button id="draw">draw</button>
</p>
<script>
    var draw = document.getElementById('draw'),
        drawTriangle = function () {
            var canvas = document.getElementById('triangle');
            context = canvas.getContext('2d');
    
            context.beginPath();
            context.moveTo(100, 150);
            context.lineTo(250, 75);
            context.lineTo(125, 30);
            context.closePath();
            context.lineWidth = 5;
            context.stroke();
            context.fillStyle = 'red';
            context.fill();
        };
    draw.onclick = drawTriangle
</script>

Plead upgrade your browser.