HTML
CSS
JS
Edit on Codewith.it
<!DOCTYPE html> <html > <body> <div class="cont"> <div id="tools"> <h3> Impostazioni </h3> <label for="spessore">Spessore pennello </label> <input id="spessore" type="range" min="1" max="30" value="10" onchange="AggiornaTools()"> <br> <br> <label for="colore">Colore </label> <input id="colore" type="color" onchange="AggiornaTools()"> <br> <br> <label for="forma">Forma </label> <select id="forma" onchange="AggiornaTools()"> <option value="round">Rotondo </option> <option value="square">Quadrato </option> <option value="butt">Linea </option> </select> <br> <br> <button onclick="Reset()"> Cancella tutto </button> </div> <div id="area"> <canvas id="canvas"> </canvas> </div> </div> </body> </html>
body{ font-family:"arial" } .cont{ display:flex; margin:auto; } .cont > div{ flex:1 ; } canvas{ background: white; border:solid 1px grey; cursor:crosshair; } #tools{ background:rgba(228,228,228,0.7); padding:20px 5px; text-align:center; max-width:300px; }
var pennello; var colore; var spessore; var crd = { x:0 , y:0}; var paint = false; var canvasArea = document.querySelector('#canvas'); var ctxx = canvas.getContext('2d'); function Reset(){ ctxx.canvas.width = 500; ctxx.canvas.height = 500; } function AggiornaTools(){ pennello = document.getElementById("forma").value; colore = document.getElementById("colore").value; spessore = document.getElementById("spessore").value; } function Posizione(event){ crd.x = event.clientX - canvasArea.offsetLeft; crd.y = event.clientY - canvasArea.offsetTop; } function Draw(event){ paint = true; Posizione(event); } function Stop(){ paint = false; } function Move(event){ if (!paint) return; ctxx.beginPath(); ctxx.lineWidth = spessore; ctxx.lineCap = pennello; ctxx.strokeStyle = colore; ctxx.moveTo(crd.x, crd.y); Posizione(event); ctxx.lineTo(crd.x, crd.y); ctxx.stroke(); } //Inizializza window.addEventListener('load', ()=>{ Reset(); AggiornaTools(); document.addEventListener('mousedown', Draw); document.addEventListener('mouseup', Stop); document.addEventListener('mousemove', Move); window.addEventListener('reset', Reset); });