graphics.beginStroke not working in IE11 or edge

I'm painting a ruler to the canvas. The ruler paints in chrome but not in IE or Edge. The tick marks of the ruler are not painting. I think my problem is in set stroke. Does IE not support set stroke?

Any idea what I'm doing wrong?

I think the problem is in these two lines but I'm unsure.

division.graphics.setStrokeStyle(0.5).beginStroke("black");

backgroundOfDivision.graphics.drawRect(-pixelsPerDivision / 2, 200, pixelsPerDivision, divisionHeight).endStroke();

Link to the ruler game

      function createRuler(lengthInInches, start) {

        var ruler = new createjs.Container();

        var pixelsPerDivision = settings.ruler.pixelsPerDivision;

        var totalDivisions = settings.ruler.divisionsPerInch * (lengthInInches);

        var cmPerInch = 2.54;
        var mmPerInch = cmPerInch * 10;

        var rectangle = new createjs.Shape();
        var rulerHeight = 200;
        rectangle.graphics.beginStroke("black").beginFill("white").drawRect(0, 200, totalDivisions * pixelsPerDivision, rulerHeight);

        ruler.addChild(rectangle);

        var divisionContainer;
        var backgroundOfDivision;

        var division, divisionHeight, numberText;

        var end = start + totalDivisions;

        var startDivision = start * settings.ruler.divisionsPerInch;




        //Paint Standard Ruler
        for (var i = 0; i <= totalDivisions; ++i) {

            divisionContainer = new createjs.Container();
            divisionContainer.value = i * (1 / settings.ruler.divisionsPerInch) + start;
            divisionContainer.unit = "in";
            backgroundOfDivision = new createjs.Shape();

            division = new createjs.Shape();
            division.x = i * pixelsPerDivision
            division.graphics.setStrokeStyle(0.5).beginStroke("black");

            if ((i + startDivision) % 32 == 0) {
                // make big line
                divisionHeight = 70;

                if ((i + startDivision) > 0) {
                    var numberText = new createjs.Text(((i + startDivision) / 32).toString(), "32px Arial", "black");

                    numberText.x = division.x;
                    numberText.y = divisionHeight + 200;
                    numberText.textAlign = "center";

                    divisionContainer.addChild(numberText);
                }

            }
            else if ((i + startDivision) % 8 == 0) {
                // make 1/4 inch line
                divisionHeight = 60;
            }
            else if ((i + startDivision) % 4 == 0) {
                // make 1/8 inch line
                divisionHeight = 45;
            }
            else if ((i + startDivision) % 2 == 0) {
                // make 1/16 inch line
                divisionHeight = 30;
            }
            else {
                // make 1/32 inch line
                divisionHeight = 15;

            }
            backgroundOfDivision.graphics.setStrokeStyle(0.5).beginStroke("Green").beginFill("Green");
            backgroundOfDivision.alpha = 0.0;
            backgroundOfDivision.graphics.drawRect(-pixelsPerDivision / 2, 200, pixelsPerDivision, divisionHeight).endStroke();
            backgroundOfDivision.x = i * pixelsPerDivision;

            division.graphics.drawRect(0, 200, 0, divisionHeight).endStroke();
            divisionContainer.divisionHeight = divisionHeight;
            divisionContainer.division = division;
            divisionContainer.backgroundOfDivision = backgroundOfDivision;

            divisionContainer.addChild(backgroundOfDivision);
            divisionContainer.addEventListener("rollover", function (e) {

                createjs.Tween.get(e.currentTarget.backgroundOfDivision).to({ alpha: 1.0 }, 500);
            });
            divisionContainer.addEventListener("rollout", function (e) {

                createjs.Tween.get(e.currentTarget.backgroundOfDivision, { override: true }).to({ alpha: 0.0 }, 250);
            });
            divisionContainer.addEventListener("mousedown", function (e) {
                if (clickedAnswerNowWait == false) {
                    btnClick();
                    clickedAnswerNowWait = true;
                    CheckAnswer(e.currentTarget)
                }
            });

            divisionContainer.addChild(division);
            ruler.addChild(divisionContainer);
            allTheDivisions.push(divisionContainer);
        }
}

1 answer

  • answered 2018-01-11 19:46 Lanny

    The issue here is not with EaselJS beginStroke, but rather how browsers handle a 0-width rectangle.

    To draw your ticks on your ruler, you are using:

    division.graphics.beginStroke("green")
      .drawRect(0, 200, 0, divisionHeight);
    

    In Chrome, this will show the stroke, however IE/Edge does not. To illustrate this, I created a simple demo that just does a stroke on a raw canvas:

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,0,100);
    ctx.stroke();
    

    In Chrome, this shows a stroke, and IE/Edge it does not.

    I would recommend instead using a stroke. It has the benefit of auto-centering as the stroke grows, and you can control the lineCap as well. If you want ticks that have a different fill/stroke, then rectangles are the way to go, as long as they are wider than 0.

    Hope that helps!