HTML5 - Drawing grids on your Canvas as guides to help you draw.
While learning HTML 5 Canvas, I have used a few tools to help me plot my X and Y coordinates on the Canvas. The HTML5 Canvas coordinates work on the X and Y axis almost similar to traditional Mathematics, the only difference is that the Y coordinate moves downwards instead of upwards.
So you basically start from the top left angle of your box as point (0,0) and move horizontally to the right as the X-axis and vertically down as the Y Axis. The HTML 5 Canvas API will usually construct shapes by plotting points on the Canvas DIV and join them together. It's difficult to guess the X and Y Corordinates on a blank white canvas. The tools I have used to help with this are
2. Firefox Web developer toolbar plugin which allows you to use the Ruler tool to check measurements.
Both these tools are handy but still do not provide the best guide to be able to plot my points. So to make my life easier, I have decided to write a simple script that will target my Canvas DIV and apply a 10x10 pixels grids in light grey lines as background. This Grid system can also have a predefined gap like making the lines slightly bolder at every 50px intervals so that it makes it easier when you have coordinates like 470px on the X axis to plot.
Below is the full code to demonstrate this.
<!DOCTYPE html>
<html>
<head>
<title>Learning the basics of canvas</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function buildGrids(gridPixelSize, color, gap, div)
{
var canvas = $('#'+div+'').get(0);
var ctx = canvas.getContext("2d");
ctx.lineWidth = 0.5;
ctx.strokeStyle = color;
// horizontal grid lines
for(var i = 0; i <= canvas.height; i = i + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
if(i % parseInt(gap) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
// vertical grid lines
for(var j = 0; j <= canvas.width; j = j + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(j, 0);
ctx.lineTo(j, canvas.height);
if(j % parseInt(gap) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
}
buildGrids(10, "#EEEEEE", 50, "myCanvas");
});
</script>
</head>
<body>
<p>Canvas Experiment</p>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #EEE">
Browser does not support canvas
</canvas>
</body>
</html>Code Explanation:
Begin by defining your html doctype with the <head> tag and add your jquery file.
<!DOCTYPE html>
<html>
<head>
<title>Learning the basics of canvas</title>
<meta charset="utf-8">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Function for Grid will go here
});
</script>Now that you have defined your html <head> section and added document.ready to execute functions when the page loads, we will keep that space ready to add our function later.
Lets define the canvas area in the body. In the body section we add a Canvas DIV which will be targeted for the drawing and also the grids.
<body> <p>Canvas Experiment</p> <canvas id="myCanvas" width="600" height="600" style="border:1px solid #EEE"> Browser does not support canvas </canvas> </body>
I have defined my canvas DIV as myCanvas for this experiment.
The Grid function
function buildGrids(gridPixelSize, color, gap, div)
{
var canvas = $('#'+div+'').get(0);
var ctx = canvas.getContext("2d");
ctx.lineWidth = 0.5;
ctx.strokeStyle = color;
// horizontal grid lines
for(var i = 0; i <= canvas.height; i = i + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
if(i % parseInt(gap) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
// vertical grid lines
for(var j = 0; j <= canvas.width; j = j + gridPixelSize)
{
ctx.beginPath();
ctx.moveTo(j, 0);
ctx.lineTo(j, canvas.height);
if(j % parseInt(gap) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
}The Grid function above is a simple logic that calculates the width of the box and adds horizontal lines with a defined color at 10 pixels interval. The logic also calculates the height of the box and adds vertical lines with the defined color at 10 pixels intervals.
These lines construct a grid system on the canvas that helps to understand where coordinates will live on the plane.
You will also notice that i have added a conditional logic that checks at an internal called gap to make the line thicker so its easier to count if you were dealing with big numbers. So if you were counting up to 300 pixels, instead of counting 30 x 10 pixels grids , you can count as 6 x 50 pixels grids to get there.
To add the Grids on your canvas, simply call the function like this:
buildGrids(10, "#EEEEEE", 50, "myCanvas");
The first Parameter is the default grid box dimensions or the gap that the lines will be drawn vertically and horizontally.
The second Parameter is the Color of the lines
The Third Parameter is the Gap we want to show a thicker line.
The fourth Parameter is the Div where you want to apply the Grids.
I am sure this can be further refactored to make it better. so if you have any suggestions, please feel free to add it here and improvise.
