<html>
<body>
Ширина изображения
<br>
<input type="text" id="wcanvas" value="100">
<br>
Высота изображения
<br>
<input type="text" id="hcanvas" value="100">
<br>
<input type="button" value="создать новый холст" onclick="func1()">
<br>
Размер пера
<br>
<input type="text" id="szpixel" value="10">
<br>
Цвет пера
<br>
<input type="color" id="mycolor" value="#000000">
<br>
<canvas id="myCanvas" width="100" height="100" onclick="func2()" style="border:1px solid #000000;">
</canvas>
<script>
function func1(){
var canvas = document.getElementById("myCanvas");
canvas.width = document.getElementById("wcanvas").value;
canvas.height = document.getElementById("hcanvas").value;
}
function func2(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var mycolor = document.getElementById("mycolor");
var xVal = event.pageX - canvas.offsetLeft;
var yVal = event.pageY - canvas.offsetTop;
ctx.fillStyle = mycolor.value;
var szpixel = document.getElementById("szpixel");
ctx.fillRect(xVal,yVal,szpixel.value,szpixel.value );
}
</script>
</body>
</html>
| 