Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 900
  • Last Modified:

HTML5 - Canvas, draw a grid - horizontal and vertical lines over an image.

Hi..
Any idea how I can draw a grid with horizontal and vertical lines over an existing image in a canvas?
grid-over-image.jpg
0
JElster
Asked:
JElster
1 Solution
 
Robert SchuttSoftware EngineerCommented:
based on code from one of your previous questions try something like this:
<html>
<body>
<div id="images"></div>
<canvas  style="margin:0;padding:0;position:relative;left:150px;top:50px;" id="imgCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");

var img = new Image();
img.src = 'http://c3e308.medialib.glogster.com/media/6f/6f51bc3a6754a352d1b831d02fb1be7676317170f47ea6ffab4587de281ba6c7/patrick-star-hammer-jpg.jpg';
img.onload = function() {
    context.drawImage(this, 0, 0);
    drawGrid();
};

var scalex = 2, scaley = 2;
context.scale(scalex, scaley);   // Zoom 200 %

function drawGrid() {
    var x,
        y,
        xx = canvas.width / scalex,
        yy = canvas.height / scaley,
        nx = 9, // number of rows
        ny = 4; // number of columns
    context.beginPath();
    for (x = 1; x < nx; x++) {
        y = xx * x / nx;
        context.moveTo(0, y);
        context.lineTo(xx, y);
    }
    context.closePath();
    context.lineWidth = 5 / scalex;
    context.strokeStyle = "#d3d3d3";
    context.stroke();
    context.beginPath();
    for (y = 1; y < ny; y++) {
        x = yy * y / ny;
        context.moveTo(x, 0);
        context.lineTo(x, yy);
    }
    context.closePath();
    context.lineWidth = 5 / scaley;
    context.strokeStyle = "#d3d3d3";
    context.stroke();
}

function draw(e) {
    var pos = getMousePos(canvas, e);
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = "#0000ff";
    context.fillRect(posx / scalex, posy / scaley, 4, 4);
}
window.addEventListener('mousemove', draw, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}
</script>

Open in new window

0
 
JElsterAuthor Commented:
Awesome again!
thx
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now