- HTML: HyperText Markup Language | MDN"> - HTML: HyperText Markup Language | MDN"> - HTML: HyperText Markup Language | MDN

The below example shows a very simple drawing app created using a <canvas> element and some CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.

html<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> <input type="button" value="Clear canvas" /> </div> <canvas class="myCanvas"> <p>Add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } jsconst canvas = document.querySelector(".myCanvas"); const width = (canvas.width = window.innerWidth); const height = (canvas.height = window.innerHeight - 85); const ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); const colorPicker = document.querySelector('input[type="color"]'); const sizePicker = document.querySelector('input[type="range"]'); const output = document.querySelector(".output"); const clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees) { return (degrees * Math.PI) / 180; } // update size picker output value sizePicker.oninput = () => { output.textContent = sizePicker.value; }; // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates document.onmousemove = (e) => { curX = e.pageX; curY = e.pageY; }; canvas.onmousedown = () => { pressed = true; }; canvas.onmouseup = () => { pressed = false; }; clearBtn.onclick = () => { 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();