<html>
<head>
<title>StackOverflow test bed</title>
</head>
<canvas id="ecg" width="750px" height="750px" ></canvas>
<script type="text/javascript">
function drawGrid(){
var c_canvas = document.getElementById("ecg");
drawSmallGrid(c_canvas);
drawMediumGrid(c_canvas)
drawBigGrid(c_canvas);
return;
}
function drawSmallGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#f1dedf";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 750; x += 3) {
context.moveTo(x, 0);
context.lineTo(x, 750);
context.stroke();
}
for (var y = 0.5; y < 750; y += 3) {
context.moveTo(0, y);
context.lineTo(750, y);
context.stroke();
}
context.closePath();
return;
}
function drawMediumGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#f0adaa";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 750; x += 15) {
context.moveTo(x, 0);
context.lineTo(x, 750);
context.stroke();
};
for (var y = 0.5; y < 750; y += 15) {
context.moveTo(0, y);
context.lineTo(750, y);
context.stroke();
};
context.closePath();
return;
}
function drawBigGrid(c_canvas){
var context = c_canvas.getContext("2d");
context.strokeStyle = "#e0514b";
context.strokeWidth=1;
context.beginPath();
for (var x = 0.5; x < 750; x += 75) {
context.moveTo(x, 0);
context.lineTo(x, 750);
context.stroke();
};
for (var y = 0.5; y < 750; y += 75) {
context.moveTo(0, y);
context.lineTo(750, y);
context.stroke();
};
context.closePath();
return;
}
drawGrid()
</script>
</html>