JSFiddle - React, Tailwind, and code Playground

by tabvn

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Canvas Input Element</title>
</head>
<body>
	<canvas id="draw" width="500" height="500"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById("draw");
	var ctx = canvas.getContext("2d");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	ctx.beginPath();

	function Input(text = "", options = {}){
		this.text = text;
		this.options = Object.assign({width: 250, height: 40, font: "17px Arial", borderWidth: 1, borderColor: "#ccc", padding: 5}, options);
		this.position = {x: 10, y: 10};
		this.isFocus = false;
		this.focusIndex = text.length;
		this.isCommandKey = false;
		this.selected = false;

		this.render = function(){
			ctx.clearRect(this.position.x, this.position.y, this.options.width, this.options.height);
			ctx.font = this.options.font;
			ctx.lineWidth = this.options.borderWidth;
			ctx.strokeStyle = this.options.borderColor;
			if(this.isFocus){
				ctx.strokeStyle = "#000";
			}
			ctx.rect(this.position.x, this.position.y, this.options.width, this.options.height);
			ctx.stroke();

			// write text
			var str = "";
			for(var i = 0; i < this.text.length; i++){
				if(!this.selected && this.isFocus && this.focusIndex === i){
					str += "|";
				}
				str += this.text[i];
			}
			if(!this.selected && this.isFocus && this.focusIndex === this.text.length){
				str += "|";
			}

			if(this.selected){
					var _width = ctx.measureText(this.text).width;
					ctx.fillStyle = 'rgba(0,0,0,0.5)';
				 	ctx.fillRect(this.position.x + this.options.padding, this.position.y + this.options.padding, _width, parseInt(this.options.font, 17));
				 
			}

			ctx.fillStyle = "#000";
			ctx.fillText(str, this.position.x + this.options.padding,  this.position.y + (this.options.height / 2) + this.options.padding);

		}

		this.handleOnClick = function(e){
			let clientX = e.clientX;
			let clientY = e.clientY;
			if(clientX <= this.position.x + this.options.width &&...