Creating Grid with Javascript and HTML5

Creating Grid with HTML5 Canvas and JavaScript

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="description" content="Creating Grid with Javascript">
<meta name="author" content="jefley.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Grid with Javascript and HTML5</title>
<style>
body {
margin: 0px;
}

.container {
justify-content: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-flow: row;
border: 1px solid #d3d3d3;
transition: all 0.3s ease;
position: -webkit-sticky;
}
</style>
</head>

<body>

<div class="container"></div>
<script>

// Define canvas measurements. This is the window where your grid will be drawn
let height = 640;
let width = 640;

// Define the size of each grid in pixels
const grid_size = 40;

// Creating canvas and setting properties
const canvas = document.createElement('canvas');
canvas.id = "myCanvas";
canvas.width = width;
canvas.height = height;
canvas.style.margin = "4vh";
canvas.style.border = "4vh";
canvas.style.display = "flex";

// Define where the canvas will be mounted. In this case I am mounting on the first element with a class of 'container'
const mountTo = document.getElementsByClassName("container")[0];
mountTo.appendChild(canvas);

// Create a canvas context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//set canvas styles for text and lines
ctx.strokeStyle = "rgb(56, 38, 39)";
ctx.font = "11px Arial";
ctx.fillStyle = "rgb(56, 83, 188)";

// Create grids and optionally set any text into them
for (let i = 0; i <= width; i += grid_size) {
for (let j = 0; j <= height; j += grid_size) {

// Set canvas text
ctx.fillText(i + j, i + grid_size / 3, j - (grid_size / 3));

if (i == 0 && j == 0) {
ctx.moveTo(0, 0);
ctx.lineTo(0, width)
ctx.stroke();
ctx.moveTo(0, 0);
ctx.lineTo(height, 0)
ctx.stroke();
}
ctx.lineTo(i, j);
ctx.moveTo(i + grid_size, j + grid_size)
ctx.stroke();
}
}
</script>
</body>

</html>