<canvas> crossbrowser - IE

Question

How to make a working crossbrowser script with jCanvas

• In IE8 the canvas is not appended..
• In FF and Chrome the drawn frame isn't positioned at the right coords? The starting point is outside the viewport?!

fsfiddle:

http://jsfiddle.net/4GSXC/

code:

<!--[if IE]><script src="http://secure.dynaccount.com/js/jquery/excanvas.min.js" type="text/javascript"></script><![endif]-->
<script src="http://secure.dynaccount.com/js/jquery/jcanvas.5.0.min.js" type="text/javascript"></script>
            
        function Canvas_overview(){
            var _this = this;
            
            this.width = 900;
            this.height = 360;
            
            this.frm_x = 80;
            this.frm_y = 30;
            this.frm_width = 800;
            this.frm_height = 280;
            
            this.cnstr = function(elm){
                var canvas = $('<canvas width="'+this.width+'" height="'+this.height+'" style="border:1px solid black"></canvas>').appendTo(elm)
                    .drawRect({
                        strokeStyle: '#969696',
                        strokeWidth: 1,
                        x: this.frm_x,
                        y: this.frm_y,
                        width: this.frm_width,
                        height: this.frm_height
                    });
            };
        }
            
        var Canvas = new Canvas_overview();
        Canvas.cnstr($('body'));

Answer 1

Since excanvas doesn't support everything, I actually recommend using FlashCanvas. It seems more likely to work than excanvas (since excanvas never worked for me).

In regards to the "wrong" coordinates, jCanvas considers (x, y) coordinates at the center of a shape by default (rather than the top-left corner). You can easily override this behavior by setting the fromCenter property to false (in your object).

Hope that helps.

-Caleb