javascript-apps/drawing-with-js.html at master · drjorgepolanco/javascript-apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
    <head>
        <title>Let's Draw!</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <style>
            canvas {
                border: 1px dotted red;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="300" height="200">
            This is displayed if the browser does not support HTML5 Canvas.
        </canvas>
        <script type='text/javascript' src='script.js'></script>
    </body>

    <script>
        var my_canvas = document.getElementById('canvas');
        var context = my_canvas.getContext("2d");

        // THE FACE
        context.fillStyle = "red";
        context.beginPath();
        context.arc(150, 100, 40, 0, 2 * Math.PI);
        context.closePath();
        context.fill();
        context.lineWidth = 2;
        context.stroke();
        context.fillStyle = "black";

        // LEFT EYE
        context.beginPath();
        context.arc(134, 90, 5, 0, 2 * Math.PI);
        context.closePath();
        context.fill();

        // RIGHT EYE
        context.beginPath();
        context.arc(164, 90, 5, 0, 2 * Math.PI);
        context.closePath();
        context.fill();

        // MOUTH
        context.beginPath();
        // context.arc(148, 112, 20, 0, Math.PI);
        context.arc(149, 112, 20, Math.PI, 2 * Math.PI, true)
        // context.stroke();
        context.closePath();
        context.fill();

        // LEFT ARM
        context.beginPath();
        context.fillRect(86, 138, 14, 70);
        context.closePath();

        // RIGHT ARM
        context.beginPath();
        context.fillRect(200, 50, 14, 100);
        context.closePath();

        // FIST
        context.beginPath();
        context.fillStyle = "#669900";
        context.arc(207, 36, 16, 0, 2 * Math.PI);
        context.closePath();
        context.fill();

        // CHEST
        context.fillStyle = "#336699";
        context.fillRect(100, 140, 100, 64);

        // TEXT
        context.font = "30px bold";
        context.fillText("Hello World!", 20, 50);
    </script>
</html>