I've been searching everywhere and couldn't find how to draw a Grid / Table on a HTML5 Canvas. I'm new to HTML5 and canvas.
I know how to draw shapes but this drawing grid is taking forever to understand.
Can someone help me on this? Your time is greatly appreciated.
03 Answers
The answer is taken from here Grid drawn using a <canvas> element looking stretched
Just edited it a little, hope it helps
<html>
<head>
<script type="text/javascript" language="javascript">
// Box width
var bw = 400;
// Box height
var bh = 400;
// Padding
var p = 10;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawBoard(){ for (var x = 0; x <= bw; x += 40) { context.moveTo(0.5 + x + p, p); context.lineTo(0.5 + x + p, bh + p); } for (var x = 0; x <= bh; x += 40) { context.moveTo(p, 0.5 + x + p); context.lineTo(bw + p, 0.5 + x + p); } context.strokeStyle = "black"; context.stroke();
}
drawBoard();
</script>
</head>
<body> <canvas width="420px" height="420px"></canvas>
</body>
</html>This can be also be written as:
<html>
<head>
</head>
<body> <canvas width="420px" height="420px"></canvas> <script type="text/javascript" language="javascript"> var bw = 400; var bh = 400; var p = 10; var cw = bw + (p*2) + 1; var ch = bh + (p*2) + 1; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); function drawBoard(){ for (var x = 0; x <= bw; x += 40) { context.moveTo(0.5 + x + p, p); context.lineTo(0.5 + x + p, bh + p); } for (var x = 0; x <= bh; x += 40) { context.moveTo(p, 0.5 + x + p); context.lineTo(bw + p, 0.5 + x + p); } context.strokeStyle = "black"; context.stroke(); } drawBoard(); </script>
</body>
</html>// Box width
var bw = 270;
// Box height
var bh = 180;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawBoard(){ context.lineWidth = 10; context.strokeStyle = "rgb(2,7,159)"; for (var x = 0; x < bw; x += 90) { for (var y = 0; y < bh; y += 90) { context.strokeRect(x+10, y+10, 90, 90); } }
}
drawBoard();
