JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>localstorage  </title>
        <script type="text/javascript" src="./localstor.js"></script>
        
        <meta charset="utf-8" />
    </head>
    <body ><!--onload="loadCanvas();">--> 
<section>        
    <div class="ritytor" >
    <button id="clear" type="button" >Clear</button> 
    
    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #c3c3c3;" onclick="UpdateInfo (event);">
    Your browser dosen't support the HTML5 canvas.</canvas><br />
    </div>    
    <div >    
    <!--http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange-->
    Color <select id="colorSelector" name="color" onchange="chosenColor();">    
    <option selected="selected" value="#000000">Black</option>
    <option value="#0000FF">Blue</option>
    <option value="#FF0000">Red</option>    
    <option value="#FFA500">Orange</option>
    <option value="#FFFF00">Yellow</option>
    <option value="#FFC0CB">Pink</option>
    <option value="#808080">Gray</option>
    <option value="#008000">Green</option>
    </select>
    Size <select id="sizeSelector" name="color" onchange="chosenSize();">    
    <option value="100">10</option>
    <option value="90">9</option>
    <option value="80">8</option>
    <option value="70">7</option>
    <option value="60">6</option>
    <option value="50">5</option>
    <option value="40">4</option>
    <option value="30">3</option>
    <option selected="selected" value="20">2</option>
    <option value="10">1</option>
    </select>
    
    <p> Please click in the canvas below to draw a circle of your chosen color and size</p>
    </div>
    
    </section>
    </body>
</html>

JavaScript

"use strict";
    window.onload = function() {    
        canvasText();
        loadCanvas();    
    }
    //draw circle at the cordinates of the mouse
function UpdateInfo (event) {
            var pageX = event.pageX;
            var pageY = event.pageY-75;                                
            var si=document.getElementById("sizeSelector");
            var strSize = si.options[si.selectedIndex].value;
            drawCircle(pageX,pageY,strSize);
        }
    //function for localstorage    
function loadCanvas(){
        var c=document.getElementById("myCanvas");
        var img = new Image(),
         ctx = c.getContext('2d')
        img.src = window.localStorage[storageName];
        img.onload = function(){
        ctx.drawImage(img, 0, 0);
    }
}    
//draw circle function        
function drawCircle(x,y,si){
    var x,y;
    var si=chosenSize();
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(x, y);
    ctx.beginPath();
    ctx.arc(x,y,si,0,Math.PI*2,false);
    ctx.closePath();
    ctx.strokeStyle = chosenColor();
    ctx.fillStyle= chosenColor();
    ctx.stroke();
    ctx.fill();

    //clear the canvas by clicking clear
    document.getElementById('clear').onclick = function() {
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.restore();
    }

}
//choose  drawing color function
function chosenColor(){
    var co=document.getElementById("colorSelector");
    var strColor = co.options[co.selectedIndex].value;
    return strColor;
}
//choose  drawing size function
function chosenSize(){
    var si=document.getElementById("sizeSelector");
    var strSize = si.options[si.selectedIndex].value;
    return strSize;
}
//canvas text b4 drawing
function canvasText(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="18px sans-serif";
    ctx.fillText("Please click to draw a circle or circles", 60, 200);
}