caleb531 / jcanvas

A jQuery plugin that makes the HTML5 canvas easy to work with.
https://projects.calebevans.me/jcanvas/
MIT License
626 stars 192 forks source link

breaking change in v13 #61

Closed terryweiss closed 11 years ago

terryweiss commented 11 years ago

Hi!

I recently updated to the latest version of jCanvas and after some head scratching I found that code that was working in v12 is now broken. Mostly what we are doing is drawing arcs as follows: drawArc({

            name: doc._id,
            group: "docs",
            layer: true,
         ....
            mouseover: mouseOver,
            mouseout: mouseOut
        });

The first problem is that the arcs never show up. But there are also no errors. However, when we call drawLayer, we get errors indicating that there are no layers. When it makes the call to getCanvasData, the object returned is empty. To be clearer, it is not just empty of layers, it is completely empty.

Replacing the jcanvas.js file with the last version fixes the problem.

If there is any way I can help to fix this, or provide more info. Please let me know. TIA, Terry

caleb531 commented 11 years ago

Could you please provide the last version of jCanvas that works again, and the version that breaks the code? Speaking of which, could you also please give me a complete code example? Usually, I need a full snippet of code to deal with these kinds of issues. I cannot find any issues with my set of test cases, so any test cases you can provide would be very helpful in finding the root cause of the bug.

I am terribly sorry for any inconvenience this has caused you, and I sincerely hope we can get this issue resolved. -Caleb

terryweiss commented 11 years ago

Caleb,

Thanks so much for getting back to me. Here's a fuller example:

 // get rid of the current room's arcs and text since canvas can't progressively paint.
this.roomCanvas.removeLayer(room._id);
this.roomCanvas.removeLayer(room._id + "-inner");
this.roomCanvas.removeLayer(room._id + "-text");

this.roomCanvas.clearCanvas({
    x: x,
    y: y,
    width: r,
    height: r
});   

// OK, now we are all set to actually render our little circles
// start the arc at 0 degrees
var start = 0;
// do we have anything to render?
if (total && total > 0) {
    // for each state
    sys.each(room.renderStates, function (count, state) {
        var arcLength = Math.PI * 2 * (count / total);
        // draw an arc, but only as a percentage of how many per state.
        this.roomCanvas.drawArc({
            fillStyle: this.legend[state],
            name: room._id,
            group: "rooms",
            layer: true,
            x: x,
            y: y,
            radius: r,
            inDegrees: false,
            start: start,
            end: start + arcLength,
            click: click,
            //        cursor: "pointer", // no worky
            mouseover: mouseOver,
            mouseout: mouseOut
        });
        // where we left off so that next pass will start rendering from here
        start += arcLength;
    }, this);
    // What we just did was a pie chart. This will render a little circle in the middle to make it
    // a ring chart
    this.roomCanvas.drawArc({
        strokeStyle: "#aaa",
        fillStyle: "#fff",
        name: room._id + "-inner",
        group: "rooms",
        layer: true,
        x: x,
        y: y,
        click: click,
        radius: room.dimensions.innerRadius,
        start: 0,
        end: 360,
        //      cursor: "pointer",
        mouseover: mouseOver,
        mouseout: mouseOut
    });
    // how many people are in the room?
    this.roomCanvas.drawText({
        x: x,
        y: y,
        name: room._id + "-text",
        group: "rooms",
        layer: true,
        fillStyle: "#000",
        strokeStyle: "#000",

        text: total.toString(),
        click: click,
        //      cursor: "pointer",
        mouseover: mouseOver,
        mouseout: mouseOut
    });

This is as complete an example as I can provide. We don't do much beyond scaling the canvas and redrawing the layers, but it never gets there. It executes the code above, but nothing shows up on the canvas.

The version that works does not have a version # on it, but I downloaded it mid December.

TIA, Terry

caleb531 commented 11 years ago

Hmm, I still can't really test the above example because it is missing definitions of many important variables (room, sys, x, y, r, total, etc.).

Is there a reason for not including these variables with your code?

terryweiss commented 11 years ago

Room is proprietary. All it exposes in this case is an id (string). sys is underscore. x y and r are dynamic numbers that are generated at runtime – they could be anything. Total can default to 1 and still cause the problem.

From: Caleb Evans [mailto:notifications@github.com] Sent: Friday, January 18, 2013 3:35 PM To: caleb531/jcanvas Cc: Terry Weiss Subject: Re: [jcanvas] breaking change in v13 (#61)

Hmm, I still can't really test the above example because it is missing definitions of many important variables (room, sys, x, y, r, total, etc.).

Is there a reason for not including these variables with your code?

— Reply to this email directly or view it on GitHubhttps://github.com/caleb531/jcanvas/issues/61#issuecomment-12439859.

caleb531 commented 11 years ago

Ah, okay, I see now. Thanks for that.

Good news: I have found the cause of the issue, and so I have fixed it in the latest commit. Enjoy! -Caleb

terryweiss commented 11 years ago

Dude, you rock!!!!!!

From: Caleb Evans [mailto:notifications@github.com] Sent: Friday, January 18, 2013 4:01 PM To: caleb531/jcanvas Cc: Terry Weiss Subject: Re: [jcanvas] breaking change in v13 (#61)

Ah, okay, I see now. Thanks for that.

Good news: I have found the cause of the issue, and so I have fixed it in the latest commit. Enjoy! -Caleb

— Reply to this email directly or view it on GitHubhttps://github.com/caleb531/jcanvas/issues/61#issuecomment-12440816.