S2JS - Javascript interacting with HTML : Adding more colours

Challenge: can you edit the code below to make another button that lets you draw in green ?

Hint: rather than manually type all the code, just copy and paste the button line, and then alter the copy so it's coloured green, says the word green, and causes the mouse to paint in green.

<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>