JSFiddle - React, Tailwind, and code Playground
HTML
<body onload="createCaptcha()">
<form onsubmit="validateCaptcha(event)">
<a id="captcha" onclick="createCaptcha();" style="display:inline-block;"></a><br>
<input type="text" placeholder="Captcha" id="cpatchaTextBox"/>
<button type="submit">Submit</button>
</form>
</body>
<style>
input[type=text] {
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button{
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 30px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
canvas{
/*prevent interaction with the canvas*/
pointer-events:none;
}
</style>
<script>
var code;
// Возвращает случайное целое число между min (включительно) и max (не включая max)
// Использование метода Math.round() даст вам неравномерное распределение!
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
function to_color_with_fixed_hex(random_int_hex){ //корректирует длину hex-значения
while(random_int_hex.length<6){random_int_hex = '0'+random_int_hex;}
return "#"+random_int_hex;
}
//возвращает "#FAFAFA" из строки "rbg(250, 250, 250)"
function rgbstring_to_hex_color(new_light_color){
var colors = new_light_color.split("(")[1].split(")")[0].split(",");
var b = colors.map(function(x){ //For each array element
x = parseInt(x).toString(16); //Convert to a base16 string
return (x.length==1) ? "0"+x : x; //Add zero if we get only one character
})
return b = "#"+b.join("");
}
//return random light color
function return_color() {
//for RGB:
//if (1 - (0.299 * red + 0.587 * green + 0.114 * blue) / 255 < 0.5){
// //white
//}
//else{
// //dark
//}
var random_int_hex = getRandomInt(0, 16777215).toString(16);
return to_color_with_fixed_hex(random_int_hex);
//return "#000000";
}
//инвертирует цвет (если темный, выдаёт светлый и наоборот)
function invert_color(color){
var hex...