JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <canvas id="myCanvas" width="300" height="300" style="border:solid 1px black;" onclick="drawCircle(); return true;">
        </canvas>
<br>

<form name="MyForm" id="MyForm">
        
        <p>Choose color</p>
        #<input id="myColor" type="text" placeholder="Exempel: 0088FF" />
        
        <p>Choose size</p>
        <input id="mySize" type="text" placeholder="Exempel: 15" />px
        <br>
		<input type="button" id="clear" value="Clear">
		
		<p><output name="result" form="MyForm"></output></p>
	</form>
</body>

JavaScript

var drawnOnCanvas = false;

function initiateCanvasCircle() {
    
    var context = document.getElementById('myCanvas').getContext('2d'),
        input = document.getElementById( 'myColor' ),
        size = document.getElementById( 'mySize' ),
		watermark = document.getElementById( 'myWatermark' );
    context.canvas.addEventListener('mousemove', function(event) {
        var mouseX = event.clientX - context.canvas.offsetLeft;
        var mouseY = event.clientY - context.canvas.offsetTop;
                
    });
    
    context.canvas.addEventListener('click', function(event) {
        if(!drawnOnCanvas){
            clearCanvas();
            drawnOnCanvas = true;
        }
        var mouseX = event.clientX - context.canvas.offsetLeft;
        var mouseY = event.clientY - context.canvas.offsetTop;
        
        context.beginPath();
        context.arc(mouseX, mouseY, size.value / 2, 0, 2 * Math.PI, false);
        
        
        context.fillStyle = input.value ? '#' + input.value : '#333';
             
        context.fill();
    });
    
}

function circle() {
    window.addEventListener('click', function(event) {
        initiateCanvasCircle();
    });
}

function drawCircle() {
    circle();
}

function drawText() {
     var x = canvas.width / 2;
     var y = canvas.height / 2;

      context.font = '30pt Calibri';
      context.textAlign = 'center';
      context.fillStyle = 'blue';
      context.fillText('Hello World!', x, y);   
}

function clearCanvas(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawnOnCanvas = false;
}

	// Button	
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
drawText();
      document.getElementById('clear').addEventListener('click', function() {
        clearCanvas();
          drawText();
      }, false);
	  myCanvas.addEventListener('click', function() { }, false);

initiateCanvasCircle();