S2JS - Javascript interacting with HTML : Changing the drawing width

First we're going to make some buttons that will let us control the width of the line.

We know from an earlier S2JS topic how to draw in different colours and thicknesses, but we can also see the details on the w3schools canvas reference.

All we need is a function that lets us set the width:

function SetWidth(n) { ctx.lineWidth=n; }

And a button that calls the function:

Try it — hold the mouse button down and draw, then click the button marked "Wide" and draw a bit more.

<HTML> <body> <canvas id=myCanvas height=250 width=250> </canvas> <style> #myCanvas {background-color: khaki; float:left} </style> <button onclick="SetWidth(10)"> Wide </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>