<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> <style> body { margin: 0; overflow: hidden; background: #ccc; } .toolbar { width: 150px; height: 75px; background: #ccc; padding: 5px; } input[type="color"], button { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } </style> </head> <body> <div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <button>Clear canvas</button> </div> <canvas class="myCanvas"> <p>Add suitable fallback here.</p> </canvas> <script> var canvas = document.querySelector('.myCanvas'); var width = canvas.width = window.innerWidth; var height = canvas.height = window.innerHeight-85; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0,0,width,height); var colorPicker = document.querySelector('input[type="color"]'); var sizePicker = document.querySelector('input[type="range"]'); var output = document.querySelector('.output'); var clearBtn = document.querySelector('button'); // covert degrees to radians function degToRad(degrees) { return degrees * Math.PI / 180; }; // update sizepicker output value sizePicker.oninput = function() { output.textContent = sizePicker.value; } // store mouse pointer coordinates, and whether the button is pressed var curX; var curY; var pressed = false; // update mouse pointer coordinates document.onmousemove = function(e) { curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearBtn.onclick = function() { ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0,0,width,height); } function draw() { if(pressed) { ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); ctx.fill(); } requestAnimationFrame(draw); } draw(); </script> </body> </html>