Puzzled by strokeStyle behavior

[jc17]

Hey, a new HTML5 forum! And just when I've been baffled by how to get something to work.

What I've been working on is: I found several samples of code to generate "grid" lines in a canvas. I tried them, but found it difficult to figure out which grid line I was looking at. So I added some number to every 10th grid line (which worked), and to make it easy to follow the lines, I tried making every 10th line distinctive in some way. The docs seems to say that strokeStyle is how you do this. I tried a lot of things, but they all failed. My latest attempt is:

function grid() {
var cv1 = document.getElementById("cv1");
var c = cv1.getContext("2d");
for (var x=10; x<=300; x += 10) {
c.moveTo(x,0);
if (x%100 == 0) {c.strokeStyle = "#8F8"} else {c.strokeStyle = "#CCC"}
c.lineTo(x,300);
c.stroke();
if (x%100 == 0) {c.font = "9px sans-serif"; c.textBaseline = 'top'; c.fillText(x/100,x-4,300);}
}
for (var y=10; y<=300; y += 10) {
c.moveTo(0,y+.5);
if (y%100 == 0) {c.strokeStyle = "#88F"} else {c.strokeStyle = "#CCC"}
c.lineTo(300,y+.5);
c.stroke();
if (y%100 == 0) {c.font = "9px sans-serif"; c.textBaseline = 'middle'; c.fillText(y,301,y);}
}
}

This does draw the grid lines in the canvas, and the lines that are multiples of 100 are labelled with a number. But the attempts to make every 10th line (x%100 == 0 or y%100 == 0) all failed miserably. The presence of the numbers along the edges shows that the expressions like (y%100 == 0) work properly. And the really weird thing is that in this example, all the grid lines in both direction come out the slightly-blue 88F color. Even the vertical grid lines are blue, although the 88F color isn't mentioned until after the vertical lines are drawn.

Clearly there's something going on here that I don't understand. I don't seem to find any explanation in the docs that would say why the lineTo calls in the second loop should reach back and impose the 88F color on the lines in the first loop.

Does anyone know what's going on here? Is there some way to make this work right? Note that I've tried to color every 10th vertical grid line 8F8, which should be green(ish). If I comment out the second loop, the vertical lines do turn green, but they're all green, not just the ones at a multiple of 100.

There are a lot of subtleties in HTML5 ...

(And how do I make the indentation work in the code sample? BBCode doesn't seem to have a [pre] tag, and nothing else seems appropriate.)

[Xdega]

in bbcode [ Code][ /Code] is typically used to show indented text/script. Although I am thinking about adding specific stript bbcode that has syntax higlighting. Also, my apologies that we appear to have lost the functionality to edit posts. Otherwise I would have been able to fix your post.

Here is your script, indented and presented via the code BBCode element nontheless. I used a third party "indenting" tool, so it may not bee 100%, but for the purpose of readability it should help. Unfortunately I am no canvas or JS expert, so I will leave this to someone that knows a bit better.

Code: Select all

function grid() {
    var cv1 = document.getElementById("cv1");
    var c = cv1.getContext("2d");
    for (var x = 10; x <= 300; x += 10) {
        c.moveTo(x, 0);
        if (x % 100 == 0) {
            c.strokeStyle = "#8F8"
        } else {
            c.strokeStyle = "#CCC"
        }
        c.lineTo(x, 300);
        c.stroke();
        if (x % 100 == 0) {
            c.font = "9px sans-serif";
            c.textBaseline = 'top';
            c.fillText(x / 100, x - 4, 300);
        }
    }
    for (var y = 10; y <= 300; y += 10) {
        c.moveTo(0, y + .5);
        if (y % 100 == 0) {
            c.strokeStyle = "#88F"
        } else {
            c.strokeStyle = "#CCC"
        }
        c.lineTo(300, y + .5);
        c.stroke();
        if (y % 100 == 0) {
            c.font = "9px sans-serif";
            c.textBaseline = 'middle';
            c.fillText(y, 301, y);
        }
    }
}