How to make a working crossbrowser script with jCanvas
<!--[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'));
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