S2JS - Javascript interacting with HTML : Your own paint program

You can make a copy of what we've built so far and save it in your own S2JS work area.

From there, you can add more features and improve the styling so it looks better.

If you haven't already registered a userid, click the button to do so. Otherwise click the
button to log on and copy this program to your own work area.

Once it's in your work area, you can access it from any internet device by entering its web address:

http://s2js.com / userid / paint
(userid is your S2JS userid)

<HTML> <title>My Paint Program</title> <body> <canvas id=myCanvas height=250 width=250> </canvas> <style> #myCanvas {background-color: khaki; float:left; cursor:crosshair;} .MySideButton {display:block; width:6em;} .BottomBar {clear:left; border:2px inset gray; width:250px;}; </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> <p> <button class=MySideButton style="background-color:red" onclick="SetColour('red')"> Red </button> <button class=MySideButton style="background-color:green" onclick="SetColour('green')"> Green </button> </p> <div class=BottomBar> <button onclick="ClearTheCanvas()">Clear</button> </div> <script> var ctx = myCanvas.getContext("2d"); var rect; ctx.lineJoin= "round"; ctx.lineCap= "round" var mouse_is_down = false; function SetColour(c) { ctx.strokeStyle=c + " dashed"; } function SetWidth(n) { ctx.lineWidth=n; } function ClearTheCanvas () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); } 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>