Solved

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

Posted on 2014-10-07
2
567 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
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
Comment Utility
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
Comment Utility
Awesome again!
thx
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

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.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now