任意画像の任意座標からの画像表示ができないです

Question

任意の画像のトリミングをしたいと考えています。
このときに、トリミングする始点(sx,sy)を任意の画像をクリックした座標に設定したいです。
プログラムでは、xとyをグローバル変数で宣言して、後で、event.xとevent.yをそれぞれx,yに代入して、それを始点にするように組んだのですが、(0,0)からの画像が表示されてしまいます。代入できていないようですが、何が原因なのでしょうか。
よろしくお願いします。
※訂正します
クリックしたところから始まる範囲の画像をトリミングすることはできますか?
もしくは、画像は表示できなくても良いので、その範囲の階調値を取得することはできますか?
元の画像は、モノクロ画像です。

<img id="aaa" src="/sub/map.jpg" height="500"> <script type="text/javascript"> var x=0; var y=0;

(function (){
var element = document.getElementById("aaa");

function MouseDownFunc(e){
	console.log(event.x,event.y);
	x=event.x;
	y=event.y;
}
// イベントリスナーに対応している
if(element.addEventListener){
	element.addEventListener("mousedown" , MouseDownFunc);// マウスのボタンを押すと実行されるイベント
// アタッチイベントに対応している
}else if(element.attachEvent){
	element.attachEvent("onmousedown" , MouseDownFunc);// マウスのボタンを押すと実行されるイベント
}})();


onload = function() {
draw();};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  /* Imageオブジェクトを生成 */
  var img = new Image();
  img.src = "/sub/map.jpg?" + new Date().getTime();
  /* 画像が読み込まれるのを待ってから処理を続行 */
img.onload = function() {
ctx.drawImage(img, x, y, 500, 400, 80, 60, 400, 300);}}

</script>

Answer 1

onload=function()をonclick=function()にすると上手くいきました。
っしかし、何回もクリックすると、前のimageと混同してしまうので、これを何らかの方法で初期化しないといけないみたいです。。

Answer 2

タイミングの問題です。
この書き方ではページを開いて window.onload が発火する前に mousedown を発動させなければ期待通りに動作しません。
mousedown したタイミングで draw() させなければなりません。

ところで、attachEvent で動作する IE8- は <canvas> に対応していないと思うのですが、Polyfill 的な何かを使っている前提なのでしょうか。

Re: th3 さん

Comments

[th3]

回答ありがとうございます。
mousedownの中にonload=functionから後をいれてもみましたが、やはり(0,0)から始まります。
こちらのURLを参考にcanvas.jsではなく、excanvas.jsをしようしています。
なので、Polyfil的なのだと思います。
http://www.html5.jp/canvas/how.html

[th3]

訂正します。
mousedownの中にonload=functionから後をいれてもみましたが、マウスを押しても画像はトリミングされませんでした。

Answer 3

とりあえずfunction MouseDownFunc(e){をfunction MouseDownFunc(event){にしてみるとか、どうですか？

Comments

[th3]

回答ありがとうございます。
eをeventに変えたものの、やはり(0,0)からの画像が表示されてしまいました。
ほかのところをeventにしたりとしてみましたが、やはり、変わりませんでした。