astrosketch/astrosketch.html

 <link rel="stylesheet" href="astrosketch.css">

        <form id="settings">
<div class="field-row">
    <input class="centerButton" type="file" accept="image/*;capture=camera" name="image" id="file"  onchange="loadFile(event)">
          
            <div class="invert">
            <input checked disabled="true" type="checkbox" id="invertBox">
            <label for="invertBox">Invert</label>
            </div>

          <div class="grayscale">
            <input checked disabled="true" type="checkbox" id="grayscaleBox">
            <label for="grayscaleBox">Grayscale</label>
            </div>
          
</div>

  <div class="field-row">
    <label for="BrightnessSlider">Brightness:</label>
    <label for="BrightnessSlider" style="">L</label>
    <input id="BrightnessSlider" width="200px" type="range" value="-25" min="-100" max="100">
    <label for="BrightnessSlider">H</label>
    <label for="BrightnessSlider">(<span style="width:24px; color:orange;" id="BrightnessValue">-25</span>)</label>
  </div>
  <div class="field-row">
    <label for="ContrastSlider">Contrast:&nbsp;&nbsp;</label>
    <label for="ContrastSlider">L</label>

    <input id="ContrastSlider" type="range" value="38" min="-100" max="100">
    <label for="ContrastSlider">H</label>
    <label for="ContrastSlider">(<span style="width:24px; color:orange;" id="ContrastValue">38</span>)</label>

  </div>


        <img id="img" />

        </form>
        <button id="submitButton">Submit</button>
        
</main>


  <script type="text/javascript" src="astrosketch.js"></script>

        </div>
        </div>
        
                <p id="result">⬇️Converted Image⬇️</p>
                
 

        <canvas id="myCanvas"></canvas>
        <a id="dl" download="Sketch.png" href="#">Download Result</a>


        </div>
        </div>



</div>



</div>