Canvas/index.html at master · liam9408/Canvas · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://kit.fontawesome.com/3b3222625a.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/stylesheets.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painttt</title>
</head>
<body>

<div class="flexbox">

<div class="left">
    <div class="text-container">
        <h5 id="label" class="text-title">01. CANVAS</h5>
        <h1 id="title" class="text-title">Hello World! <br> Welcome to Paint!</h1>
        <p id="body" class="text-body">This is where you can draw lots of cool stuff and have lots and lots of fun! Don't be afraid if it's shit! Beauty is in the eye of the beholder! <br> <br> Everybody's gotta start somewhere right! Just click one of the below icons to start drawing!</p>
    </div>
    <!-- <div class="slidecontainer">
         <input type="range" min="1" max="100" id="range">
    </div> -->
    <div class="button-section">
        <div id="buttons-slider" class="buttons">
            <button class="expanding-button" id="color-picker">
                <div class="fa fa-palette"></div>
                <div class="color-picker-container">
                    <a class="color-button" id="color-button-red"></a>
                    <a class="color-button" id="color-button-orange"></a>
                    <a class="color-button" id="color-button-yellow"></a>
                    <a class="color-button" id="color-button-green"></a>
                    <a class="color-button" id="color-button-blue"></a>
                    <a class="color-button" id="color-button-purple"></a>
                    <a class="color-button" id="color-button-black"></a>
                </div>
            </button>
            <button class="expanding-button" id="brush-picker">
                <div class="fa fa-brush" id="fa-brush"></div>
                <div class="brush-picker-container">
                    <a class="brush-button fa fa-paint-brush" id="brush-button-normal"></a>
                    <a class="brush-button fa fa-paint-roller" id="brush-button-spray"></a>
                    <a class="brush-button fa fa fa-brush" id="brush-button-three"></a>
                </div>
            </button>
            <button class="expanding-button" id="lineWidth-picker">
                <p id="linewidthIndicator">LW:<br>5px</p>
                <div class="lineWidth-picker-container">
                    <input type="range" min="1" max="100" value="5" id="range">
                </div>
            </button>
            <button class="button fa fa-object-ungroup" id="selector"></button>
            <!-- <div class="button-placeholder"></div> -->
            <!-- <div class="button-placeholder"></div> -->
            <button class="button fa fa-fill-drip" id="filler"></button>
        </div>
        <div class="buttons">
            <button class="button fa fa-square" id="drawing-rectangle"></button>
            <button class="button fas fa-caret-up" id="drawing-triangle"></button>
            <button class="button fa fa-circle" id="drawing-circle"></button>
            <button class="button fa fa-grip-lines" id="drawing-line"></button>
            <button class="button fa fa-eraser" id="eraser"></button>
        </div>
        <div class="buttons">
            <button class="button fa fa-file" id="clear-canvas"></button>
            <button class="button fa fa-text-height" id="textbox"></button>
            <button class="button fa fa-bezier-curve" id="curve-line"></button>
            <button class="button fa fa-undo-alt" id="undo"></button>
            <button class="button fa fa-redo-alt" id="redo"></button>
        </div>
        <div class="buttons">
            <div class="button-placeholder"></div>
            <div class="button-placeholder"></div>
            <button class="button fa fa-save" id="saveButton"></button>
            <a id="link"></a>
            <div class="button-placeholder"></div>
            <div class="button-placeholder"></div>
        </div>
    </div>
</div>

<!-- <div class="vl"></div> -->

<div id="canvas-container">
    <canvas id="canvas-real" class="canvas" width='1250px' height='897px' style='border:2px transparent solid'></canvas>
    <canvas id="canvas-draft" class="canvas" width='1250px' height='897px' style='border:2px transparent solid'></canvas>
</div>

    <script type='text/javascript' src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type='text/javascript' src="./assets/javascript/canvasCommons.js"></script>
    <script type='text/javascript' src="./assets/javascript/drawing-line.js"></script>
    <script type='text/javascript' src="./assets/javascript/drawing-rectangle.js"></script>
    <script type='text/javascript' src="./assets/javascript/drawing-triangle.js"></script>
    <script type='text/javascript' src="./assets/javascript/drawing-circle.js"></script>
    <script type='text/javascript' src="./assets/javascript/drawingStraightLine.js"></script>
    <script type='text/javascript' src="./assets/javascript/eraser.js"></script>
    <script type='text/javascript' src="./assets/javascript/clear-canvas.js"></script>
    <script type='text/javascript' src="./assets/javascript/textbox.js"></script>
    <script type='text/javascript' src="./assets/javascript/undo.js"></script>
    <script type='text/javascript' src="./assets/javascript/redo.js"></script>
    <script type='text/javascript' src="./assets/javascript/curve-line.js"></script>
    <script type='text/javascript' src="./assets/javascript/spray.js"></script>
    <script type='text/javascript' src="./assets/javascript/lineWidthSlider.js"></script>
    <script type='text/javascript' src="./assets/javascript/colorpicker.js"></script>
    <script type='text/javascript' src="./assets/javascript/brushPicker.js"></script>
    <script type='text/javascript' src="./assets/javascript/selector.js"></script>
    <script type="text/javascript" src="./assets/javascript/init.js"></script>

    <script src="./assets/javascript/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>


    <!-- <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/draggable.bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/draggable.js"></script> -->

</body>
</html>