<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<p style="position:absolute;left:520px;top:0px;">Первый цвет</p>
<p style="position:absolute;left:520px;top:50px;">Второй цвет</p>
<p style="position:absolute;left:520px;top:100px;">Третий цвет</p>
<input type="color" id="mycolor1" style="position:absolute;left:650px;top:20px;" value="#ff0000">
<input type="color" id="mycolor2" style="position:absolute;left:650px;top:70px;" value="#00ff00">
<input type="color" id="mycolor3" style="position:absolute;left:650px;top:120px;" value="#0000ff">
<br>
<br>
<br>
<input type="button" value="сформировать триколор" onclick="generate()">
<script>
generate();
function generate(){
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let color1 = document.getElementById("mycolor1").value;
ctx.fillStyle = color1;
ctx.fillRect(0,0, 500, 100);
let color2 = document.getElementById("mycolor2").value;
ctx.fillStyle = color2;
ctx.fillRect(0,100, 500, 100);
let color3 = document.getElementById("mycolor3").value;
ctx.fillStyle = color3;
ctx.fillRect(0,200, 500, 100);
}
</script>
</body>
</html>
| 