README
ctx-render-grid-lines
plot grid lines in html5 canvas
install
npm install ctx-render-grid-lines
use
gridlines(ctx
, spacing
, minX
, minY
, maxX
, maxY
)
ctx
- a CanvasRenderingContext2D instancespacing
- the distance between the grid linesminX
- minimum x value in bounding rectangleminY
- minimum y value in bounding rectanglemaxX
- maximum x value in bounding rectanglemaxY
- maximum y value in bounding rectangle
example
var center = require('ctx-translate-center');
var gridlines = require('ctx-render-grid-lines');
var ctx = document.createElement('canvas').getContext('2d');
document.body.appendChild(ctx.canvas);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
center(ctx);
ctx.beginPath()
gridlines(ctx, 10, -50, -50, 50, 50);
ctx.strokeStyle = 'red';
ctx.stroke();
which results in: