How to draw grid using HTML5 and canvas or SVG

HtmlSvgHtml5 Canvas

Html Problem Overview

I want to draw a grid as shown in the image but I totally don't have any idea where to begin.

Should I use SVG or should I use Canvas with HTML5 and how do I draw on it?

I want this grid to draw rectangle, circle or other diagrams on it and I will calculate the area of that diagram like area of a square.

grid

Html Solutions

Solution 1 - Html

SVG can do this nicely using patterns:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
    </pattern>
    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
      <rect width="80" height="80" fill="url(#smallGrid)"/>
      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
    </pattern>
  </defs>
      
  <rect width="100%" height="100%" fill="url(#grid)" />
</svg>

I set width and height to 100%, so you can define the actual width and height on use, either for inline SVG:

<div style="width:400px;height:300px">
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
        <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
      </pattern>
      <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
        <rect width="80" height="80" fill="url(#smallGrid)"/>
        <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
      </pattern>
    </defs>
        
    <rect width="100%" height="100%" fill="url(#grid)" />
  </svg>
</div>

or an <img> element:

<img src="https://svgshare.com/i/eGa.svg" width="700" height="200"/>

results in:

https://svgshare.com/i/eGa.svg" width="700" height="200"/>

<img src="https://svgshare.com/i/eGa.svg" width="241" height="401"/>

results in

https://svgshare.com/i/eGa.svg" width="241" height="401"/>

Note that for this particular grid you have to use widths and heights of the form n x 80 + 1 (with n being any integer) if you want the grid to start and end with a thick stroke.

Solution 2 - Html

I am posting my code using canvas here on SO but I am also creating a working sample on JSFiddle here.

<!DOCTYPE html>
<html>
<head>
    <title>StackOverflow test bed</title>
    <script type="text/javascript">
        function drawGrid() {
            var cnv = document.getElementById("cnv");
        
            var gridOptions = {
                minorLines: {
                    separation: 5,
                    color: '#00FF00'
                },
                majorLines: {
                    separation: 30,
                    color: '#FF0000'
                }
            };

            drawGridLines(cnv, gridOptions.minorLines);
            drawGridLines(cnv, gridOptions.majorLines);

            return;
        }

        function drawGridLines(cnv, lineOptions) {


            var iWidth = cnv.width;
            var iHeight = cnv.height;

            var ctx = cnv.getContext('2d');

            ctx.strokeStyle = lineOptions.color;
            ctx.strokeWidth = 1;
        
            ctx.beginPath();

            var iCount = null;
            var i = null;
            var x = null;
            var y = null;

            iCount = Math.floor(iWidth / lineOptions.separation);

            for (i = 1; i <= iCount; i++) {
                x = (i * lineOptions.separation);
                ctx.moveTo(x, 0);
                ctx.lineTo(x, iHeight);
                ctx.stroke();
            }


            iCount = Math.floor(iHeight / lineOptions.separation);

            for (i = 1; i <= iCount; i++) {
                y = (i * lineOptions.separation);
                ctx.moveTo(0, y);
                ctx.lineTo(iWidth, y);
                ctx.stroke();
            }

            ctx.closePath();

            return;
        }

    </script>
</head>
<body onload="drawGrid()">
    <canvas id="cnv" width="500" height="500"></canvas>
</body>
</html>

Using the canvas approach you can make the grid size dynamic by changing the separation parameter.

However, if your grid size is going to be static I feel that maybe you don't need to draw the grid. Just for the sake of displaying a grid to the user you could use CSS to repeat a background image as demonstrated in the fiddle here. That will also be good on page performance.

Solution 3 - Html

In the interest of coverage, how about a CSS based approach?

<!DOCTYPE html>
<html>
  <head>
      <style>
      html {
        height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: #434343;    
        background-size: 75px 75px;
        background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
      }

      canvas {
          width:100%;
          height:100%;
          position:absolute;

          background-color: transparent;
          background-size: 15px 15px;
          background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
      }

      </style>
  </head>
  <body>
      <canvas></canvas>
  </body>
</html>

Solution 4 - Html

it's very easy to do using canvas, that's what I recommend. I'm responding quickly on mobile here, but you should get the idea even if the psuedocode below isn't EXACTLY right:

you'll have a loop something like:

// "Ctx" is your canvas context
// "Width," "Height," and other vars that start with a capital letter are set according
//   to your canvas size or preference

var i;
for (i=0; i < Height; i += GridSize) {
   ctx.lineWidth(1.0+((i%10)==0));
   ctx.moveTo(0,i);
   ctx.lineTo(Width,i);
   ctx.stroke();
}
for (i=0; i < Width; i += GridSize) {
   ctx.lineWidth(1.0+((i%10)==0));
   ctx.moveTo(i,0);
   ctx.lineTo(i,Height);
   ctx.stroke();
}

Solution 5 - Html

Building on Ben Crowhurst's example, you can do this with repeating-linear-gradient too. Here's my solution using css. I used variables to give you an idea of what does what.

<!DOCTYPE html>
<html>
	<head>
		<style>
html {
	height: 100%;
}

body {
	--line-color: rgba(255 255 255 / .05);
	--line-thickness: 1px;
	--minor-length: 7.5px;
	--major-length: 75px;
	
	--line: var(--line-color) 0 var(--line-thickness);
	--small-body: transparent var(--line-thickness) var(--minor-length);
	--large-body: transparent var(--line-thickness) var(--major-length);
	
	--small-squares: repeating-linear-gradient(
		to bottom, var(--line), var(--small-body)
	), repeating-linear-gradient(
		to right, var(--line), var(--small-body)
	);
	
	--large-squares: repeating-linear-gradient(
		to bottom, var(--line), var(--large-body)
	), repeating-linear-gradient(
		to right, var(--line), var(--large-body)
	);
	
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #434343;
	background-image: var(--small-squares), var(--large-squares);
}
		</style>
	</head>
	<body>
	</body>
</html>

You can view a live example in this fiddle of the css grid.

Solution 6 - Html

Create SVG in JavaScript

Another way is to let JavaScript create the SVG for you. I'm about to show how to create a smaller, 4x4 grid composed of SVG rectangles so you can see the grid's details:

https://i.imgur.com/ovfbql2.png" width="240" alt="4x4 grid created with JavaScript" />

First, you add an empty SVG representing the grid to your HTML and then fill that grid with SVG rectangles in JavaScript:

http://www.w3.org/2000/svg"></svg>

let grid = document.getElementById("svg_grid"); let startX = 5; let startY = 5; let rectWidth = 60; let rectHeight = 60;

let nrOfColumns = 4; let nrOfRows = 4;

let horizontalPadding = 5; let verticalPadding = 5;

let strokeWidth = 2;

let rectX = startX;

for (let colIdx = 0; colIdx < nrOfColumns; colIdx++) {

  let rectY = startY;

  for (let rowIdx = 0; rowIdx < nrOfRows; rowIdx++) {
      let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
      rect.setAttribute("x",  rectX);
      rect.setAttribute("y",  rectY);
      rect.setAttribute("width", rectWidth );
      rect.setAttribute("height", rectHeight);
      rect.setAttribute("style", "fill:blue;stroke:green;stroke-width:" +
                                  strokeWidth +";fill-opacity:0.1;stroke-opacity:0.6");
      // Rounded corners
      rect.setAttribute("rx", "3%");
      rect.setAttribute("ry", "3%");

      grid.appendChild(rect);

      rectY += rectHeight + verticalPadding;
  }
  rectX += rectWidth + horizontalPadding;

}

// Resize the grid to fit its containing rectangles let svgWidth = startX + nrOfColumns * (horizontalPadding + rectWidth + strokeWidth); let svgHeight = startY + nrOfRows * (verticalPadding + rectHeight + strokeWidth); grid.setAttribute("width", svgWidth); grid.setAttribute("height", svgHeight);

Categories
Recommended Html Solutions
Recommended Svg Solutions
Recommended Html5 Canvas Solutions

Previous Solution:

Await a Async Void method call for unit testing

C#.NetUnit TestingAsync Await

Next Solution:

How to define different types for the same class in C++

C++Types

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSandeep KumarView Question on Stackoverflow
Solution 1 - HtmlThomas WView Answer on Stackoverflow
Solution 2 - HtmlTanzeel KaziView Answer on Stackoverflow
Solution 3 - HtmlBen CrowhurstView Answer on Stackoverflow
Solution 4 - HtmlbjorkeView Answer on Stackoverflow
Solution 5 - HtmlJimmyView Answer on Stackoverflow
Solution 6 - HtmlMatthias BraunView Answer on Stackoverflow