2

So I have this fiddle which totally explains my issue.

Working fiddle

The JS

        var w = this.w * this.scale;
        var h = this.h * this.scale;
        var x = this.x - w * .5;
        var y = this.y - h * .5;

        //standard Canvas rotation operation
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.rotation * Math.PI / 180);

        ctx.fillStyle = this.fillStyle;
        ctx.fillRect(w * -0.5, h * -0.5, w, h);
        ctx.restore();

Defective fiddle

Shouvik
  • 11,350
  • 16
  • 58
  • 89
  • Maybe the directions of this fiddle will hel understand what the canvas responds to. http://jsfiddle.net/hph4e/10/ – Shouvik Nov 13 '10 at 05:01

2 Answers2

1

You can compare the size of the canvas to the CSS and make the necessary adjustments.

eg.

var cssScale = [canvas.getSize().x / canvas.get('width'),
                canvas.getSize().y / canvas.get('height')];
...
this.setDims(x*cssScale[0], y*cssScale[1], w*cssScale[0], h*cssScale[1]);
...
this.x = (x - this.offset[0]) / cssScale[0] + w * .5;
this.y = (y - this.offset[1]) / cssScale[1] + h * .5;

http://jsfiddle.net/rQkSF/

0

Not sure I understand the question but try resetting the size of the canvas height & width attributes to match the CSS when you resize.

  • Thats my point... I don't want to do that... I would like the mouse events to work even if the height & width of canvas don't match that of the CSS. – Shouvik Nov 13 '10 at 04:56