mypaint.exe

<!Doctype html>
<html><head>
    <title>mypaint.exe</title>

    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">

  body{
    background-color:#cccccc;
  }

  canvas{ border:2px solid black; margin: 20pt;}

  #ctrls{ background-color:#eeeeee; }

#ctrls button{
  font-size:20pt;
  border: 1px solid #d0d0d0;
}

#ctrls .slct{
  border:2px solid black;
 }
</style>
</head>

<body>


<div id="ctrls">
  <button id="line" title="line" class="slct"> \ </button>
  <button id="bezi" title="bezier curve"> S </button>
  <button id="elps" title="ellipse / circle" data-n="9675">○</button>
  <button id="rect" title="rectangle" data-n="9645">▭</button>
<button id="rect" title="fill" data-n="">fill</button>
</div><canvas id="cnvs1" width="800" height="600" style="background-color: white;"></canvas>
<script type="text/javascript">

var unslct=function(p){ var ce=p.childNodes,i=ce.length; while(i--)ce[i].className=""; },
 ctx=cnvs1.getContext("2d"),
dtool, //current draw tool selected

dargs=[]; //points for current active shapel


ctrls.onclick=function(e){var tar=e.target||e.srcElement; if(tar.nodeName=="BUTTON"){
  unslct(ctrls);
  if(tar.id==dtool){ dtool=null; }else{
   tar.className="slct";
   dtool=tar.id;
  }
 }
};


var shapes_=[];

</script>
</body></html>