S2JS - Javascript interacting with HTML : More width buttons

Let's add another couple of buttons and a small amount of styling.

This is easy !

<HTML> <body> <canvas id=myCanvas height=250 width=250> </canvas> <style> #myCanvas {background-color: khaki; float:left} .MySideButton {display:block; width:6em;} </style> <button class=MySideButton onclick="SetWidth(10)"> Wide </button> <button class=MySideButton onclick="SetWidth(5)"> Medium </button> <button class=MySideButton onclick="SetWidth(1)"> Narrow </button> <script> function SetWidth(n) { ctx.lineWidth=n; } var ctx = myCanvas.getContext("2d"); var rect; ctx.lineJoin= "round"; ctx.lineCap= "round" var mouse_is_down = false; function MyMouseDownHandler(MyEvent) { if (MyEvent.which == 1) mouse_is_down= true; rect = myCanvas.getBoundingClientRect(); ctx.moveTo(MyEvent.clientX - rect.left, MyEvent.clientY - rect.top); ctx.beginPath(); } function MyMouseUpHandler(MyEvent) { if (MyEvent.which == 1) mouse_is_down= false; } function MyMouseMoveHandler(MyEvent) { if (mouse_is_down) { ctx.lineTo(MyEvent.clientX - rect.left, MyEvent.clientY - rect.top); ctx.stroke(); } } myCanvas.addEventListener("mousedown", MyMouseDownHandler); myCanvas.addEventListener("mouseup", MyMouseUpHandler); myCanvas.addEventListener("mousemove", MyMouseMoveHandler); </script> </body> </html>