<!--docytpe html--> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <script> window.onload=function(){ var c=document.getElementById("myCanvas").getContext("2d"); var in1=document.getElementById("in1"); var in2=document.getElementById("in2"); in1.onfocus=function(){ c.beginPath(); c.rect(10, 10, 200, 200); c.drawFocusIfNeeded(in1); c.beginPath(); c.rect(10, 220, 200, 200); c.drawFocusIfNeeded(in2); } in1.focus(); } </script> </head> <body> <canvas id="myCanvas" height="500" width="500" style="border:1px solid black"> <input id="in1" type="range" min="1" max="12"> <input id="in2" type="range" min="1" max="12"> </canvas> </body></html>