Я использую следующий код.Это работает нормально, но проблема в том, что когда я меняю цвет моего карандаша, то у вещей, которые я уже нарисовал на холсте, его цвет также меняется.Я не могу понять, почему это происходит и как это исправить, любая идея?
<script type="text/javascript">
function cnvs_getCoordinates(e) {
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop;
var c = document.getElementById("coordiv");
var context = c.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = document.getElementById("dcol").value;
if (started == 1) {
context.lineTo(x, y);
context.stroke();
}
else {
context.moveTo(x, y);
}
}
function a() {
started = 1;
context.beginpath();
}
function b() {
started = 0;
context.closePath();
}
</script>
HTML-часть
<body>
<div style="border: thin solid black">hi
<canvas id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmousedown="a()" onmouseup="b()" > </canvas>
<select id="dcol" name="Colour">
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
<option value="green"> Green</option>
<option value="blue">Blue</option>
<option value="white">** ERASER **</option>
</select>
</div>
</body>