S2JS - Javascript interacting with HTML : Wider, wider

We can even do things as shown in the "Wider" and "Narrower" buttons in this example:

<button class=MySideButton onclick="SetWidth(ctx.lineWidth-1)"> Narrower </button>

The important thought to get in your mind is whatever you put between the quotes in the onclick attribute will be executed just as though it is Javascript code located within a <script> tag.

<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(ctx.lineWidth+1)"> Wider </button> <button class=MySideButton onclick="SetWidth(10)"> Wide </button> <button class=MySideButton onclick="SetWidth(5)"> Medium </button> <button class=MySideButton onclick="SetWidth(1)"> Narrow </button> <button class=MySideButton onclick="SetWidth(ctx.lineWidth-1)"> Narrower </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>