画布HTML5，IE，Chrome和FireFox，字体和偏移属性

Question

I developed an HTML5 canvas graph that retrieves SQL-stored information and plots them graphically (color-coded) on a HTML5 canvas. The canvas allows scrolling over a timeline to show various events that have occured (Say between 1990 - 2013).

IE works like a charm.

Chrome has issues with the context font being muddy/bleeding effect - i was using monospace 11px, I changed it to verdana later on, but still a bit muddy with chrome. Firefox doesn't have this issue.

Firefox has an issue, where it retrives and plots information on the canvas, but when i click on the canvas to scroll in the past or future of current position on the timeline, the entire canvas dissapears. Chrome doesn't have this issue.

I 've tried to explain my issues on this question, if you need more clarification please ask.

here is the sample code:-

http://jsfiddle.net/WNpKE/16/

(if you click on the link and open it in IE, FireFox, and Chrome, I hope that the issue will become more evident.)

  // defining the canvas element
            var can = document.getElementById("myCanvas"),
                ctx = can.getContext("2d"),
                dragging = false,
                translated = 0,
                lastX = 0,
                grid = (function (dX, dY) {
                    var can = document.createElement("canvas"),
                        ctx = can.getContext('2d');
                    can.width = dX;
                    can.height = dY;
                    // fill canvas color
                    ctx.fillStyle = 'black';
                    ctx.fillRect(0, 0, dX, dY);

                    // x axis
                    ctx.strokeStyle = 'orange';
                    ctx.moveTo(.5, 0.5);
                    ctx.lineTo(dX + .5, 0.5);
                    ctx.stroke();

                    // y axis
                    ctx.moveTo(.5, .5);
                    ctx.lineTo(.5, dY + .5);
                    ctx.stroke();

                    return ctx.createPattern(can, 'repeat');
                })(72, 50);

            ctx.save();
            /*ctx.scale(1, -1);
            ctx.translate(0, -900);*/



            // when mouse is clicked on canvas
            can.onmousedown = function (e) {
                var evt = e || event;
                dragging = true;
                lastX = evt.offsetX;
            }


            // when mouse is clicked again and the canvas is deselected  
            window.onmouseup = function () {
                dragging = false;
            }




            window.onmousemove = function (e) {
                var evt = e || event;
                if (dragging) {
                    var delta = evt.offsetX - lastX;
                    translated += delta;
                    //console.log(translated);
                    ctx.restore();
                    ctx.clearRect(0, 0, 930, 900);
                    ctx.save();
                    ctx.translate(translated, 0);
                    lastX = evt.offsetX;
                    timeline();
                }
            }






            // Function that draws the timeline on the xy grid along with data points.
            function timeline() {

                // fill canvas color
                ctx.fillStyle = "black";
                ctx.fillRect(-translated, 0, 930, 900);
                ctx.fillStyle = grid;
                ctx.fillRect(-translated, -250, 930, 900);


                // y-co-ordinate texts - Home, Office, Emergency, etc...
                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Home", -translated, 510);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Office", -translated, 460);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Emergency", -translated, 410);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Foster Home", -translated, 360);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("SNF", -translated, 310);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("LTC", -translated, 260);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Drug/Rehab", -translated, 210);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Hospital", -translated, 160);

                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Hospice", -translated, 110);


                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("ANP Exams", -translated, 540);
                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Life Event", -translated, 560);
                ctx.strokeStyle = "White";
                ctx.font = "10px Verdana";
                ctx.strokeText("Care Plan", -translated, 610);

I have changed a bit since this code, but the basic idea of click and scroll is still the same. Thanks.

Answer 1

Use fillText instead of strokeText .

The FF error is happening because the FF event object doesn't have an offsetX property. Use pageX instead.

Updated fiddle: http://jsfiddle.net/WNpKE/18/

Answer 2

Take a look at the highcharts API. It's free and has an enormous amount of features. I've recently used it in a web application effort querying data from an SQL database not unlike what you're doing. It works across all the major browsers.

I am guessing that the canvas element (being a new feature of html5) isn't being rendered the same way between browsers. You may be better off either re-writing in javascript / java or just using the highcharts framework as-is. I realise this isn't a solution to your current problem, but it may save you some time.

Good Luck!