Пример:
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="graf" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;" width="500" height="400"></canvas>
<script style="text/javascript">
var mashtab = 12;
function initGraf() {
var canvas, ctx;
canvas = document.getElementById("graf");
ctx = canvas.getContext("2d");
ctx.strokeStyle="#000";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);
ctx.lineTo(canvas.width,canvas.height/2);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(1, 0);
ctx.lineTo(1,canvas.height);
ctx.stroke();
ctx.closePath();
ctx.strokeStyle="#000";
ctx.beginPath();
for (var y = canvas.height/2; y < canvas.height; y = y + mashtab) {
ctx.beginPath();
var tmp = Boolean(true)
for (var x = 5; x < canvas.width;) {
ctx.beginPath();
if (tmp) {
ctx.moveTo(x - 6, y);
}
ctx.lineTo(x, y);
x = parseInt(x + 5);
ctx.stroke();
ctx.closePath();
if (tmp) {
tmp = false;
} else {
tmp = true;
};
console.log(tmp)
}
};
ctx.stroke();
ctx.closePath();
}
initGraf();
</script>
</body>
</html>
Почему все линии толщиной 2 px?