S2JS - Javascript interacting with HTML : Adding colour

Now let's add some colour controls. We define a function that lets the colour be altered:

function SetColor(c) { ctx.strokeStyle= c; }

And we create a button to call the function

There's a few things to notice:

We're using an inline style for the button colour. Not the best way to do CSS, but makes the example more concise
We need to pass the colour name as a string inside the call to SetColour, but that call is already inside quotes. The easiest way to quote something that's already inside quotes is just to use the alternative quoting style - double versus single.

<HTML> <body> <canvas id=myCanvas height=250 width=250> </canvas> <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> <style> #myCanvas {background-color: khaki; float:left} .MySideButton {display:block; width:6em;} </style> <p> <button class=MySideButton style="background-color:red" onclick="SetColour('red')"> Red </button> <script> function SetColour(c) { ctx.strokeStyle=c; } 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>