HTML5 Canvas not mapping correctly

Question

0.00/5 (No votes)

See more:

I cannot for the life of me figure this out. I'm in the early stages of creating a web based timesheet. I'm trying to create a time grid where you can just click and drag to select the desired time frame. I have a mockup built, but for some reason the mappings are not matching up. If I click in a box, it has to be on the far left to select that box. I used "(ev._x) - (ev._x % 10)" to account for this, but it does not seem to do the trick. Any help would be much appreciated.

<pre lang="xml"><!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML 5 Test Page</title>
        <script type="text/javascript">
            function load() {
                var canvas, context, tool, staticy, staticx, temp;
                init();

                function init() {
                    // Find the canvas element.
                    canvas = document.getElementById('c');
                    if (!canvas) {
                        alert('Error: I cannot find the canvas element!');
                        return;
                    }

                    if (!canvas.getContext) {
                        alert('Error: no canvas.getContext!');
                        return;
                    }

                    // Get the 2D canvas context.
                    context = canvas.getContext('2d');
                    if (!context) {
                        alert('Error: failed to getContext!');
                        return;
                    }

                    // Pencil tool instance.
                    tool = new tool_pencil();

                    // Attach the mousedown, mousemove and mouseup event listeners.
                    canvas.addEventListener('mousedown', ev_canvas, false);
                    canvas.addEventListener('mousemove', ev_canvas, false);
                    canvas.addEventListener('mouseup', ev_canvas, false);
                    drawGrid();

                }

                function drawGrid() {
                    context.beginPath();
                    for (var i = 0.5; i < 501; i += 50) {
                        for (var x = 0.5; x <= 961; x += 10) {
                            context.moveTo(x, i);
                            context.lineTo(x, i + 40);
                        }
                    }
                    for (var y = 0.5; y < 500; y += 50) {
                        context.moveTo(0, y);
                        context.lineTo(961, y);
                        context.moveTo(0, y + 40);
                        context.lineTo(961, y + 40);
                    }
                    context.strokeStyle = "#000";
                    context.stroke();
                }
                // This painting tool works like a drawing pencil which tracks the mouse
                // movements.
                function tool_pencil() {
                    var tool = this;
                    this.started = false;

                    // This is called when you start holding down the mouse button.
                    // This starts the pencil drawing.
                    this.mousedown = function (ev) {
                        context.beginPath();
                        staticy = ev._y - (ev._y % 50);
                        staticx = (ev._x) - (ev._x % 10);

                        tool.started = true;

                    };

                    // This function is called every time you move the mouse.
                    this.mousemove = function (ev) {
                        //future code
                    };

                    // This is called when you release the mouse button.
                    this.mouseup = function (ev) {
                        if (tool.started) {
                            context.fillStyle = "red";
                            //context.fillRect(startx, starty, width, height)
                            context.fillRect(staticx, staticy, (ev._x - (ev._x % 10)) - staticx, 40);
                            context.stroke();
                            tool.started = false;
                        }
                    };
                }

                // The general-purpose event handler. This function just determines the mouse
                // position relative to the canvas element.
                function ev_canvas(ev) {
                    if (ev.layerX || ev.layerX == 0) { // Firefox
                        ev._x = ev.layerX;
                        ev._y = ev.layerY;
                    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                        ev._x = ev.offsetX;
                        ev._y = ev.offsetY;
                    }

                    // Call the event handler of the tool.
                    var func = tool[ev.type];
                    if (func) {
                        func(ev);
                    }
                }
            }

        </script>
    </head>
    <body onload="load()">
         <canvas id="c" width="961" height="500"></canvas>
    </body>
</html>

/edit - I've only tested on the most recent version of Chrome

Posted 19-Jul-11 5:54am

Nunnenkamp

Updated 19-Jul-11 8:10am

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 19-Jul-11 17:26pm

OK, this code shows a big number of black-framed rectangles, so what? What's the problem? What do you expect to see?
--SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nunnenkamp · Accepted Answer · 2011-07-22T04:26:00

Solution 1

When you click and drag on the grid, it fills in the blocks. I figured it out though, apparently you have to make the canvas position relative:

<canvas id="c" width="961" height="500" style="position:relative;">

Posted 22-Jul-11 4:26am

Nunnenkamp