Maingron/MainOS

View on GitHub
Program Files/paint/exec.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Paint</title>
        <link rel="shortcut icon" href="#iofs:C:/Program Files/paint/icon.svg">
        <link rel="stylesheet" href="paint.min.css">
        <link rel="stylesheet" href="../../helper.min.css">
        <script src="../../helper.js"></script>
    </head>
    <body>

        <img id="canvascopy" crossorigin="anonymous">
        <img id="loadcanvas">


    <div class="altbar">
        <a id="savebutton" onclick="savefile()">Save as </a> <input type="text" id="filename1" placeholder="Filename" />
        <select onchange="setfileformat(this.value)" id="fileformat">
            <option onselect="setfileformat('png')">PNG</option>
            <option onselect="setfileformat('jpg')">JPG</option>
        </select>

        <button onclick="undo()">Undo</button>
        <!-- <button onclick="redo()" disabled>Redo</button> -->
    </div>

    <div class="leftmenu">
        <h3>Tool: </h3>
        <h4>Brushes</h4>
        <button title="Pen" class="tool tool--pen" onclick="props.setTool('pen', this)">✏️</button>
        <button title="Spherebrush" class="tool tool--spherebrush" onclick="props.setTool('spherebrush', this)">🟡</button>
        <button title="Spherebrush (Outline)" class="tool tool--spherebrush-o" onclick="props.setTool('spherebrush-o', this)">🟡</button>
        
        <h4>Geometry</h4>
        <button title="Rectangle" class="tool tool--rect-filled" onclick="props.setTool('rect', this)">🟧</button>
        
        <button title="Circle (Filled)" class="tool tool--circle-filled" onclick="props.setTool('circle', this)">🟣</button>
        <button title="Circle (Outline)" class="tool tool--circle-outline" onclick="props.setTool('circle-o', this)">⭕</button>
        <h3>Color:</h3>
        <input type="color" class="color" value="#ff0000" size="5" onchange="props.setColor(this.value)">
        <h3>Pen Size</h3>
        <input type="number" min="1" max="999" value="1" size="5" id="width">
    </div>

    <div class="rightmenu">
        <h3></h3>
        <label for="">Zoom</label>
        <input type="number" name="zoom" id="zoom" size="5" onchange="setCanvasScale(this.value)" min=".1" max="999" step=".1">

        <h3></h3>
        <label for="">Width</label>
        <input type="number" min="1" id="canvas-width" max="9999" size="5" onchange="setCanvasSize(this.value, undefined)">
        <h3></h3>
        <label for="">Height</label>
        <input type="number" min="1" id="canvas-height" max="9999" size="5" onchange="setCanvasSize(undefined, this.value)">
    </div>

    <div id="imagep">
        <canvas id="canvas"></canvas>
    </div>

        <script src="script.js"></script>

    </body>
</html>