Click here to Skip to main content
15,611,704 members
Please Sign up or sign in to vote.
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">
        <meta charset="utf-8" />
        <title>HTML 5 Test Page</title>
        <script type="text/javascript">
            function load() {
                var canvas, context, tool, staticy, staticx, temp;

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

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

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

                    // 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);


                function drawGrid() {
                    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";
                // 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) {
                        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);
                            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) {

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

/edit - I've only tested on the most recent version of Chrome
Updated 19-Jul-11 8:10am
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?

1 solution

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;">
Share this answer

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900