Solved

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

Posted on 2014-10-07
2
639 Views
Last Modified: 2014-10-08
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
Comment
Question by:JElster
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40367891
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
 
LVL 1

Author Closing Comment

by:JElster
ID: 40369558
Awesome again!
thx
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question