Ответил на свой вопрос. Функции были написаны только для id нижнего канваса. Вопрос с убиранием сетки появился.
Она находится на верхнем канвасе. При нажатии на кнопку 'убрать сетку' вызывается clearRect() который 'чистит' верхний канвас. Проблема в том, что при последующем накладывании сетки другого размера, происходит совмещение старой и новой. Я понимаю, что clearRect делает нужное место всего лишь прозрачным. Как еще можно очищать сетку, чтобы потом она не появлялась снова?
<html>
<head>
<style>
body {
margin: 0;
}
#draw {
position: absolute;
background-color: transparent;
z-index: 0;
}
table {
position: absolute;
right: 15%;
}
#grid {
position: absolute;
background-color: transparent;
z-index: 1;
}
</style>
<canvas id='draw' width='600' height='400' style='border:1px solid'></canvas>
<canvas id='grid' width='600' height='400' style='border:1px solid'></canvas>
<script type='text/javascript'>
window.onload = function(e){
var canvas=document.getElementById("draw");
var can=canvas.getContext("2d");
var grid = document.getElementById("grid");
var canGr = grid.getContext("2d");
var gridOp = 180;
function gridF(){
gridSize(parseInt(rangevalueGridSize.value),10);
}
function gridClear(){
//canGr.width = canGr.width;
canGr.clearRect(0,0,600,400);
}
function gridSize(gridSizeArg){
if(gridSizeArg == 0){}
else{
for (var grid1 = 0.5; grid1 < 600; grid1 = grid1 + gridSizeArg) {
canGr.moveTo(grid1, 0);
canGr.lineWidth = 1;
canGr.lineTo(grid1, 400);
gridOpacity(parseInt(rangevalueGridOpacity.value),10);
}
for (var grid2 = 0.5; grid2 < 400; grid2 = grid2 + gridSizeArg) {
canGr.moveTo(0, grid2);
canGr.lineWidth = 1;
canGr.lineTo(600, grid2);
gridOpacity(parseInt(rangevalueGridOpacity.value),10);
}
}
}
function gridOpacity(gridOpacityArg){
gridOp = gridOpacityArg;
canGr.strokeStyle = "rgb("+gridOp+","+gridOp+","+gridOp+")";
canGr.stroke();
}
document.getElementById("gridB").onclick = gridF;
document.getElementById("gridClear").onclick = gridClear;
}
</script>
<title>
</title>
</head>
<body>
<br>
<table border="0">
<tr>
<td><button id="gridB">Сетка</button></td>
<td>
<input type="range" min="0" max="100" value="50" step="1" onchange="rangevalueGridSize.value=value" />
<output id="rangevalueGridSize">50</output>
</td>
<td>
<input type="range" min="0" max="255" value="180" step="1" onchange="rangevalueGridOpacity.value=value" />
<output id="rangevalueGridOpacity">180</output>
</td>
<td><button id="gridClear">Убрать сетку</button></td>
</tr>
</table>
</body>
</html>
UPD. Получилось с помощью сброса ширины. grid.width = grid.width;
