HTML 5 drawing line doesn't work

Question

I have already searched this site and many others for an answer to this question, but according to every site (including this one and w3schools) the following should work to draw a line using canvas in HTML5.

var c=document.getElementById("drawBox");

var ctx=c.getContext("2d");

ctx.strokeStyle=document.getElementById("lineColor").value;

ctx.fillStyle=document.getElementById("fillColor").value;

ctx.lineWidth=document.getElementById("lineWidth").value;

ctx.beginPath();

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.stroke();

Keep in mind the above lines are snippets from my code, not the full code itself, that is below.

I am trying to write a simple drawing program for an assignment I have, but for some reason (and I have tested different ways of doing this) it simply won't draw the line. It's not throwing any errors, it just won't draw the line. I am using Google Chrome (the only browser you can thoroughly trust using html5, to my understanding). I have tested the code below so as to ensure that the logical branches are, in fact, being executed. In fact, everything is executed perfectly, up until the actual ctx.stroke(); function. Again, it doesn't error, but it simply won't draw the line. The mouseup and mouseout functions are also working fine, as I tested it with other code that I knew would work. Below is the code I am working with:

HERE IS THE REVISED CODE (STILL DOESN'T DRAW THOUGH, DESPITE ALL THE GOOD HELP SO FAR)

---

    $(document).ready(function (){
///////////////////////////////////////////

    var c=document.getElementById("drawBox");
    var ctx=c.getContext("2d");
    var x=0;
    var y=0;
    var position="";
    var rangeValue=1;
    var x1=0;
    var y1=0;
    var startDraw=false;
    var x2=0;
    var y2=0;


   $('#drawBox').mousemove(function (){
        x=window.event.clientX;
        y=window.event.clientY;

        position=x + ", " + y;

        document.getElementById("check").innerHTML=position;
    });

   $("#lineWidth").mousemove(function (){
   rangeValue = document.getElementById("lineWidth").value;
   $("#rangeValueContainer").html(rangeValue);
  });

  $("#drawBox").mouseout(function (){
     startDraw=false;
  });

   $("#drawBox").mousedown(function (){
        startDraw=true;
        x1=window.event.clientX;
        y1=window.event.clientY;
        ctx.strokeStyle=document.getElementById("lineColor").value;
        ctx.fillStyle=document.getElementById("fillColor").value;
        ctx.lineWidth=document.getElementById("lineWidth").value;
        ctx.moveTo(x1, y1);
        });
        ///
    $("#drawBox").mouseup(function (){
           if (startDraw)
           {
                x2=window.event.clientX;
                y2=window.event.clientY;
                //$("p").html(document.getElementById("fillColor").value);
                ctx.lineTo(x2, y2);
                ctx.stroke();
                startDraw = false;
           }
    });

            ///

        /*if (document.getElementById("shapeSelect").value == "line")
        {
            $("#drawBox").mouseup(function (){
                x2=window.event.clientX;
                y2=window.event.clientY;
                //$("p").html(document.getElementById("lineColor").value);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            });
        }

        if (document.getElementById("shapeSelect").value == "square")
        {
            $("p").html(document.getElementById("fillColor").value);
        }

        if (document.getElementById("shapeSelect").value == "circle")
        {

        }
    }); */

    $("#eraseBtn").click(function (){
        ctx.save();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        ctx.restore();
    });
});

Also, some sites say to use beginPath() others say to use beginPath() and closePath(), while others (namely, w3schools) doesn't say to use either? Are they necessary? What is their point? Do I need them at all, or under certain circumstances? I must get this program to draw squares and circles, as well, in the end.

Any help would be greatly appreciated.

Sorry if this post is a little sloppy, I tried, but this is my first post, and I don't think the part of this site that recognizes that something is code, is picking up jquery. I had to manually enter a lot of linebreaks just to get it to look as bad as it does XD

Also, it is probably important to mention that I have (as I ALWAYS do before testing) cleared the cache and even always use ctrl+f5 to ignore the cache on load.

Thanks

Okay Here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Canvas Drawer</title>
    <base href="index.htm"/>
    <link rel="shrotcut icon" href="/paintbrush.ico" type="image/x-icon" />
    <link href="_Styling.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.1.7.2.js"></script>
    <script type="text/javascript" src="_Operation.js"></script>
  </head>
  <body>
    <table id="tableContainer">
        <tr>
            <td colspan="2">
                </br>
                <span id="programTitle">
                  Painter 0.0
                </span></br>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <canvas id="drawBox">Your browser does not support the HTML5 canvas tag.</canvas>
            </td>
        </tr>
        <tr>
            <td style="text-align: left;">
                <span>
                    Cursor Position:
                </span>
            </td>
            <td style="text-align: right;">
                <span id="checkPosition">
                  <span id="check">0, 0</span>
                </span>
            </td>
        </tr>
    </table>
    <p>
        Draw:&nbsp;&nbsp;
        <select id="shapeSelect" value="line">
            <option value="line">Line</option>
            <option value="square">Square</option>
            <option value="circle">Circle</option>
        </select>
    </p>
    <p>
        Select Line Color:&nbsp;&nbsp;<input type="color" id="lineColor"/>
    </p>
    <p>
        Select Fill Color:&nbsp;&nbsp;<input type="color" id="fillColor"/>
    </p>
    <p>
        <span style="text-decoration: underline;">Line Width:</span></br>
        <input type="range" id="lineWidth" min="1" max="30" value="10"/></br>
        <span id="rangeValueContainer">10</span></br>
    </p>
    <p>
        <input id="eraseBtn" type="button" value="Erase"/>
    </p>
  </body>

Answer 1

Ok here goes. First of all, never assume that your code is correct. If its not working, your code is obviously not correct. In this case it is not a bug. There are 2 things wrong with your current implementation:

1. Your positioning is way off. I have a sneaking suspicion that your line was not visible as it was being rendered far off of the canvas.

2. You need to use .beginPath() and .closePath() this will help prevent unpredictable behavior in your path drawing.

SOLUTION The problem is that you are defining the dimensions of your canvas in the css and not the canvas element itself.

Working solution http://jsfiddle.net/crbHg/9/

Answer 2

You have a problem with scopes.

Move all your script under one $(document).ready(),

ie,

$(document).ready(function (){

    var c=document.getElementById("drawBox");
   ...
   $('#drawBox').mousemove(function (){
   ...
   });

   etc.

});

By surrounding each code snippet in a separate function(){} block you are isolating the variables within them.

It also appears as if your canvas does not have any size. Try setting its size as well,

<canvas id="drawBox" width="200px" height="200px">Your browser does not support the HTML5 canvas tag.</canvas>

Answer 3

Your drawing is correct, but there are two problems -

• You added several separate $(document).ready functions, each with separate scope which is why none of your variables survived

• You didn't use the jQuery event object to get the client position - see the jquery api

Here's a working version jsfiddle