javascript - How to set onclick event in moving object in canvas? -

how set on click event in moving object in canvas? how move object bottom top in canvas.i newly in javascript going develop sample when page open, objects square , circle randomly come bottom of page , move top automatically.

you need establish array have moving objects in it. when onclick handler fires, check see if coordinates of click inside of objects in array.

on each animation frame, move objects subtracting of y coordinate each object.

//width , height of canvas...  var rw = 400;  var rh = 500;    var coinimage = getcoinimage();  var coinsonscreen = [];  var risingspeed = 100; //pixels per second...  var coinsize = 75;    var lastanimationtime = 0;  var howlonguntilnextcoin = 1000;  var nextcoinonscreen = 0;    function dodraw() {    var can = document.getelementbyid("mycanvas");    can.width = rw;    can.height = rh;    var context = can.getcontext("2d");      //erase canvas    context.fillstyle = "#ffffff";    context.fillrect(0, 0, rw, rh);      if (new date().gettime() - nextcoinonscreen > 0) {        var newx = math.floor(math.random() * rw) + 1;      var newy = rh + 50;        var newcoin = {        x: newx,        y: newy      };      coinsonscreen.push(newcoin);      nextcoinonscreen = new date().gettime() + howlonguntilnextcoin;    }      //now draw coins    if (lastanimationtime != 0) {        var deltatime = new date().gettime() - lastanimationtime;      var coinrisepixels = math.floor((deltatime * risingspeed) / 1000);        var survivingcoins = [];      (var = 0; < coinsonscreen.length; i++) {        var coin = coinsonscreen[i];        coin.y = coin.y - coinrisepixels;        //the stl variable controlls alpha of image                    if (coin.y + 50 > 0) {          context.drawimage(coinimage, coin.x, coin.y);          //this coin still on screen, promote new array...          survivingcoins.push(coin);        }      }      coinsonscreen = survivingcoins;    }    lastanimationtime = new date().gettime();    //wait, , call function again animate:    settimeout(function() {      dodraw();    }, 30);  }    function setupclickhandler() {    var can = document.getelementbyid("mycanvas");    //here onclick handler    can.onclick = function(e) {      var x = e.clientx;      var y = e.clienty;      var survivingcoins = [];      (var = 0; < coinsonscreen.length; i++) {        var coin = coinsonscreen[i];        //check see if coin has been clicked...        if (x > coin.x && x < coin.x + coinsize && y > coin.y && y < coin.y + coinsize) {          //ths coin disappear because not inserted new array...          console.log("coin clicked!! " + x + " " + y);        } else {          survivingcoins.push(coin);        }        }      coinsonscreen = survivingcoins;    };    }      dodraw();  setupclickhandler();    function getcoinimage() {    var image = new image(50, 50);    image.src = "data:image/png;base64,ivborw0kggoaaaansuheugaaadiaaaaycayaaaaep4ixaaaacxbiwxmaaastaaaleweampwyaaaabgdbtueaalgofptrkwaaacbjsfjnaab6jqaagimaapn/aaca6qaadtaaaopgaaa6maaaf2+sx8vgaaaowuleqvr42ml8syubj2bkhgagkgzkqkuzypz/qpo/gzwde4mjebswmdooa7eueasd5bnaav8xfafi9wx/gj4x/gw4bwrfaujtqln7/xmbrp8ie/9dzenh/4dixaaggfgykah/gcsbdg/4z84qymjbymbaysapddzeef+g9h+eh8gycuqd5h8zfgx4wxcw4sfdbib/hvduibloaqggrnjibgipgimlqzojf0pkfy6gz0dcv4het7djii7/c6t+iukreeojrmaogaxazabfip53hrf/vzksbsbydgamxsq1rgacidsp/gfgbjqmljgxizebk0eiackdwzeg+c+g34ae+apev75b6h9/md3ccpqiezansaa9wcojpigeyaay/4m8xqx11a+gl/8/muwbbkq30m53xhoeiici98h/bmdgdlqy8jcyg0kb4qtqcoib3z+adgpzf35b1iecx8oopnkhjgq5hhyyqe/9/q1r9+cnhaajgdszcwp9apqyi8hdpjdy+v+f4qow4duc3b4bfjp4paiqqaq9akoqqmc0maowvdkwaoenomgvsmh/fq8xneuqgygddxls4dzcgjy/gndycsr/gt32a2jetw8qt4hngcumhzqm3onjpwzi/i7piwabhn8jigexmmxmemjibiu+w2dievr8fugiij9hfgi5adtd/0ps+j+y3amlmsce+perao4bsazyikbiexq7weke4d97ykz8yogbgvsvl3eaaytbi/8zwiaonmuoavqeudsjmaz+azpr59cmdjza0oivg6t3/38zqajagqhy0jfxkbjifgimovdsad0czjmm/94xbpr/myekgabypqmqqiw/nmp1bcgupjajm2sdpaesucd5agqbvwtqi/xag/8rf/lwooejeqn4yokjqo4hmoy/pgp6grdifwm71dpvgvycs8vyolrf6fobaogfa7pjzghgfmti/vcfuip9babjp0dpcmlbmvlfp0txmwzmpjbu9xwyhdk5qbkon68haqtk/eikqm88hdjflqgjecybhvc/7xjeavnmnnqoaaqq03+kog2m/zh4mvix1p0degaug99bngcybwug6rzurijdrgt+d80dtmbk8+s3nad+qzlqpzwypa6kr0agwv76avwsm4aclompiqtocbksaidhgabiqgtbxmar2wwkgyhfh8nvydh5e+gjawlijvwhza///hpayi76d0mwofgfv/ygr/5dspz4mczvcupbiuqf0iaf5hmgybxqdhsjblj6gabignp+guovafj0afz7blemvlzyieaznt7l/yfcgpzogthhbexglnzqrhaqcwblofyucbsugqcq/vsxltvgpg5wjpkkqvinsp2/z+d8c2rh1si3gwaciphrejhhgzihtgnra0fqnh4ffofmljailpiscztsmhghxsudcgvuc5tmqridegkudh99hcrvfmyg3cxbf0ij9u0dud0wdnkeozmfnehnv48mnkb9z0b6aqkibvaqabwxah0v+o8hpoyf1re8ue/grij+qypnvmbxzcgeav+bkhgowosxftbyarfdybuig8ttoflp10ugfdcu2djw+avolqcaxcogjmb2h2wgo7afua1maoegnqabbe5awciuaqph/p8osfjnf0hndxikrvqmi34wucwalweahi7dg2imbfr8ezgu3onqfqjrpggt6/dvui99g6ofoqpyndmdmyc/f0jllrz5dmqxqcggeqqs9g0cm15at+ud9aeeebm0hyyag0pgh9cw39dqzoocoog/dsnb+sb5azrkokukqhnya6j/yvniky2cyr4aa+cj0gnfpkm9b8jfia0fthfizp7+gz/zg4p+ugn2+zu8lc0gtcqs5baaaaivv4xatic4cfipogjkcvhdd2frcqojokdj6a+0qqg08c2wvuacelaigkpsregvftabpka66aeknit3tx5aomag1vavabfg/z8c+d+kjge1vmff+e9wfvqhstkbaogf6chvoefmqiiwdawcknggvgodamhkta/kuexa/dxckotayisqhhstrcwqj7bxiexxl0hkqc7fcouvfmj/basw6tc406sdlzsabbalmjqtgphkavieao2csghq3vhpopkblv6lwtowai1hatr0zx9idc74d03pp0jy+wd09cdgcutghqj78hgs7ir4oihjgl9fdipnqyurokcadr4q2gaeeatqkz4sqydkdpaire1wlb4bqqehelr0yglgbk8wma8dkxclrdei1fxhghoe5hhqa/qdmh/8hdolcntlzasnsxwwqztnoeos3cmdnjc0aqkibahldvxpqdmuqhpz7z/hgafzceoioa4u3nnapgewfgibjptf75h67yzqgh2wxeb9j2yihouyroyn1atghczzemybyoafqr4ggedhl/v/n6jizwrchcxa15348rxievy2qobvsdhmwg/b4pzza1iychnd8sjfqof+myb6n///e9/cb+dnrtswbki5ahbalecokhldwmhafb+dcaj+ezaz8qpbm+9/acn2btrlg9xyqda/gmrj4aoxmkr+f4oupgywqomeahyui8qj0ngrbaggfqcjoee1mcwisaghucn1hlg7swezkg+wcmrlhybsb6qanglaripqavd/hbhbbkdcbdtnfqxpnrmwk+gt5l4oslaccccqrxhreuz/0kihfm3sogy60fgvqe0zogm5gy7l5ii4jperkaz+whpmee8xaz3ec6xvvj6cfbbslaxe9l6gtsoyr6arabbaledb3xhfjcnpnggpz2oftifa9cexykx6acjmbjpswbrroibhzzirminfii1jbllou/0jpm0fs+l48glapv4deecgriowxckgdc+n/ppgd+rxkyaiq0gxwajt9jmjjti+ewjrzwombt4bal74d20da2k+yj/n5wdop4ojdswdv9kcjy9geqmqqkamyjoyd8hf4f/cnr5yiqeqzrmaqcapceku8jr5h2aogtjmqed+bwbb66cqtqxibs5qqlack+svx0r0uv6hxgwqvwyiifdr9x5ybyiznyoewf1qyjlguwz6qgxogvvgqqtsy/+gvqribspkuasfnacrjk+aokoopv0fgrf7958i+/8i5t0ifgiqqkckdqu9j/xnipzz2hmhpdfrca0azoaajplvqd4hg2abcrztoebggrbluaa4oqhwf9yxjzqyw4bi/m2aaai1448d8x/06mixtec+nygjfiiwq78gyynpdbiif/9innngxtrmq8xs0ifsjm+ami3wzeeoatgijk2taaeectnzqhwl2cb/fwlh7/fpamogolypsmgvkikkc/agnlrsaiujwpumswqao1azqhacgpkgzgt4kappkauar18d8wgaaajl9p9avbu5kfwnmficsvg7skj89hltrbfup5abjemb2mz//6elwqzii5dfetysg+gcam14+wbsvwgvev8jfdqofzb/dlub+c1aameg6fybct7mwyxeviygwhz/dfivcpjam/q/ibjcqi9wikhgowaoejgcdj5yosucw3uohlco/gkmizepgs1gtslneayn/wdydqiaagg2hhqkia9gfg94khz4vgto+dcpgunihdlkdcgzb6h9blhovafqgvzawgavheapd/bhwyb3wmlh0w1g/mjdnonx2smamswfmr7bdyolgaccxqii7abij1iemp4nunnd6x1mopw7ybpj42vi0cyvp8q/4iruc6izd/icmp0h0jchduz8aor5dswkenkhpcd//wgm3mn2lzphdr+aagj8og1fyg0qb8m0gjowf/8q0arnhkj7bsokmkgzuudhcqgtniagxld3qi98+qszzqknhdac1bmdzwdni7jnx4jugeac9ggqo0atnqnaalggobigyhudxgbvp2gtbdrqae4ce9f/54a2o/58hrqgolcceeqtsjx7byjgcfqglwtkboy/a3f5ajzmdcuxibxhbybvdvmecaaeepog9g2gon5yqqhqw4nnbjgry7memdjpm0nguniqrhxbxv+qj1hyei1ieo2pp4rigpak/36jfltzgpqoibsdiicysbjqaztycatdqamr4lzasuqipbigj0vo4nbvx6gde4tgfmfjvsyqmp77c6xopq3enejubgggfiwzddt8fqveo4hyekzuj6sfaur3sf4dwsyyi2te8tkdoj6/kb4hbztq3ykzbgwedembe88/ujieqf0yas33uabaaofqvyfaukemkkqgdqu/0eexuezmzejngrgwso93yex3c5jruvmjiwvwk5gtigb2bclun4ldbpimfgaqqpiah3ebmv2abt2ewqyygnqbalnexogw1ngmdliiluz/8srdcd5ih5gnskqgeu8ut/xncia2p7acgabiipa8bgmn8auaebywz0cw/pwkyypnx9mh/rg0d8awrlsbisnpbsh6qkaxxvc3abqbilp/io3ma9vcbmi/8pqbhgaqqithlycecqfinid+cru6ba0y/itor4im+0eoadhgrqjolv3k0okrwpzc9xbb8xpqrf9fecuxup1/ij4k5lga5c8rcizaade+mog/4/1haria+xzafheqzy5r1kprblbxycie1orgtgxpfct/v4hzkwak1go0v3qesncaodsyochnyii/gaeiifjxbx2cnmmsgbzlas3ugvf+ycm/jehlp5jgqyfgix7ia0sykzzkqx18d0jnbpjnqhs7raoaaci1rhdjxsdah0j5a1lrqly9thlidvgjdpgxil0cinccpfcwy20yeteceecueasrbp4zailapuc+ezctdmqd27omvdhmbewsh0bh3qtsf4buowbkx4lfcso2rw5eeaqgwacqypcxuhtdswaaaabjru5erkjggg==";    return image;  }

<canvas id="mycanvas"></canvas>