javascript - fill the image within the canvas -

i have base64 image string, have created canvas , put base64 image , have given canvas height 481 , width 650, when tried display image in html, image coming not filling canvas,

can please tell me solution fill image within entire canvas, no matter quality of picture.

my code given below

jsfiddle

 var base64 = "data:image/jpeg;base64,/9j/4aaqskzjrgabaqaaaqabaad/2wbdaamcagicagmcagidawmdbayebaqebaggbgugcqgkcgkicqkkda8mcgsocwkjdrendg8qebeqcgwsexiqew8qebd/2wbdaqmdawqdbagebagqcwklebaqebaqebaqebaqebaqebaqebaqebaqebaqebaqebaqebaqebaqebaqebaqebaqebd/waarcacsaeadareaahebaxeb/8qahwaaaqubaqebaqeaaaaaaaaaaaecawqfbgcicqol/8qatraaagedawieawufbaqaaaf9aqidaaqrbrihmuege1fhbyjxfdkbkaeii0kxwrvs0fakm2jyggkkfhcygroljicokso0nty3odk6q0rfrkdisuptvfvwv1hzwmnkzwznaglqc3r1dnd4exqdhiwgh4ijipktljwwl5izmqkjpkwmp6ipqrkztlw2t7i5usldxmxgx8jjytlt1nxw19jz2uhi4+tl5ufo6erx8vp09fb3+pn6/8qahweaawebaqebaqebaqaaaaaaaaecawqfbgcicqol/8qatreaagecbaqdbacfbaqaaqj3aaecaxeebsexbhjbuqdhcrmimoeifekrobhbcsmzuvavynlrchyknoel8rcygromjygpkju2nzg5okneruzhselku1rvvldywvpjzgvmz2hpann0dxz3ehl6gooehyahiimkkpoulzaxmjmaoqokpaanqkmqsro0tba3ulm6wspexcbhymnk0tpu1dbx2nna4upk5ebn6onq8vp09fb3+pn6/9oadambaairaxeapwd5m+h9s13f24vwqbctlnlh/wdrr8hxuoxcud27f5h+gfkuhhis621ol8qehfndzy2+2mdhm9ccdzxftqolzser1kp1m1ucdqoltazkf3jkhha4bfejsrxsznwhgsrrrhzxjkdcv3rkebxpbopyrdocvvgr5vslz3l2naobyccckotwtzg1z1qcn70dz2mszawf/dvn7r6my3lsgzjay9eo1ckunzo+qlytiprd0vz1qjkdityn9tz8rgelekn3wzet6bqjvx2oaua7h2ppxbmdonelfoxh42polu6m73q9qvpo5ddrhrd23kh5mh0rz/3blgk3qvxiqxikplqxvegjadeet2g+pqwi6bie4rajuqujshu+rvrqsjfpp9xwmpaxjbmfmbdderzivxov1naggjwqlh2kthmiwm4612xkebxo21kcqg5b/lw8wzy60u9gjb6jc2pyxskp3b5onrhv3wospmeiy/snl3ez1ncpwbs4h7w+wa55yacntt2aweyxer33ys9h8ealp4d1x9q08lbe5o4svqhuk+zyveqxlh2vtej9htnpkupbvfzifdevs2168jt58w52nwp9v51wmwqcfyrvdtsrsuo+6dvdrbipvikfy7nncvgg9q5kvr4peyqfgtvm5y/dby5twdcublxcq2+nhnhtb+fd1kusp+7nozphkcjytahjanyvbtgfkgv9k9whvu48yolf0vkzgtdjng4j2v2rmefxw+mxnyio/fdsz4twc6lwwjk1jjnn1qmgfqni2jnvtvszmsoincrkfkdx5vl8/ysulq0fp1p3fi6/geazpjyylh2uvti/nx1egqqujqlkvfx3r1hh/xwuyf7omn+q8ispun868nf4x2uvaxwpm4kxv09txa4bubp2+oxobhibw5a6veyquvabs6mpi2uzbho63ptohkylpdkbuwy12uz1yozwhvlvws09djkru2ce7scopuv61oaodf4ewrtujiuidxja/suyerhzeioc7brsmiiyak6iypirurbhsej6xdeinbw2e+joaekh+yojv8picndb4nnto9j9io1paq9o/myws6fjbkxy74yod2br0mlwu1bznbfwqr02msvzit5st7se9ehfqss0cnwm6pv03yu2vi+6tqqxksyboa/8aj2nyty2ftwm7fkcn9oqg7yinvq7trvgph3xjellxznkqqesyddy9/wucrhsrhttym0zusq74wv/lzjde+hwqjbfbtm8nurcqshhi347zxrv0sxgltlqugijfkn9z3ocvdiurdyktnjht+8hqjbr06eijjxtmq2fju/hq6me5sxbi8s8+grshwr4wkweou3kbonz3+gais6njb2yiev0xxfwhtxdllz7noluwdx3nel38jpbm7tu4xmgm++pmukzb9melevcm6elgspxpprd4ao5y6iynaiwvcv6dosixvku9tkzlwjyzucr1rrg+h4gjptpt7mtmro2+orkpx5tiuydtvmj5qvgujc0jnpyoi8l/fpxb4tlrjjdd2ucng3xhsesk48tlfhfe9drmtpigpqthgr5136o9w0v4gee/hfqi7pyfuohwu7wofcdcv8/imbwwesl9x9ngq1dfrnwk7rt1xyits8dankjpaqyrfkwdj5hwnpfv463v6ncq872nzv+upx8t+a2mmn1bgribmug5bpqk1wumaxl0nivqc0nnltqcld6zf6zirjeye8jpai9a9vtjnam0yyg3kk7kamwvtknd3ocxe0jxjvt11m27dlua5jrqp2z4omuo3smmy888yrtifm1m29tpnpuad6mumb42idyqq0b+zg7qw6mdgitt1znmtonpng2n3ubemfelxdpeygh1osweh7jk1xvcqwld3cbpypxw/fwz4vctrqov7y1+8+mfbutt+ixhoeuyivdnyegbzb6j39rxwgjprd2q09yfkfomipxo/vesa/4cuxhhlgdlywldocv0ucwp2cxo/6uknjiyscweb6h4n3tkwqqgmbaywcfw9r7v3/w3cn73sd6lfwbtuctrglxlhds20uvefirkrxq0k8kkvjdtzmxhakvfpvq5u6yqxeilcgvtpq60pjsxnxk1nwkumdmuij5vvqwxukkrt8xhp1rvjvy82rvjf+8vzru3uld4jhpw8acn0pmry2jftn6n2p4i8hc9giubzzbtwxawosphkbpugvypa4v2tfm7pn7dsrxfuy1nnwp4pg8srn4x1krdrtmugdlgtj/c4/rwmlw8qc414fczzszrnhz+1hrdr5gp4m8i3hmniybzaqy2b961o1yun1szuo4qfvjj3popgphwxsq1g0g6dcick4yrxdhst7cspy0r30pul5jhlorwczjo3kdcjvx0uhqs8pomhtldphi3e6o4elcclxtu7okz+z43mp15u76iqew1ziseetsyyntvr1jra/iuatskezkdxelspxcpn2s8z3l4afaypti4vefjs1bnycw2tggqpqv/hxx+b8qsqt4bcptv+h+gzdwtqy9/wmulkr96j6d3+r9txumsw2xvlvnpbujnga/pyrtoepsxeak9njyv4i+hlq1vb4i0sas31g0j85jvogujt7ivoshxtgqdxvpq9rc1y1yunu1t2nrwd4/s/itoi2uq+rrflxdxkjn0dfy961xgdedlzl4wed7jyatks+ht1t7f5fs502ko8udnugiw5jkmav8y7j864617qoeipyklnanh3jdrp7puxiqkqcnnfrydec616hbiyfwcpzdty+5srvuty/s/trz5553earqmkt0ar6ylonkjzzdkj8dzkhuxoplrok7z9hfdl4iw/gs1j8sekiuutzk7orfakw59d6sk+mzbpzypulq+dqz6/jcnpygzbvue77f4f8am6jx/enylk0lwnlhiwji4gohffou6ceblgtt6qlruwuu99vrmxakncu903a4rwzvzrqwpgqfx2eqeiz5/wcmrecbwayspxnvxxruk2sdd6bl6zd7hytpqd54g8ef2ppxzxs7htyqehjzyp9qrx3tgcxwg5j9fzn8wiqddtto1r6h0bq91aarawfikwgygwco4jop4wa/xxxzgipui5uk+g8g2o8jz5f8rlexf6iade8plchi0xlen09c11zbwtbctd3kkcauubsdb8jfhbaecln/aispv7lztdmguqjctoh7d/apc9qjom4nieqfkvorfzplozdqjunwhvlr5dl5fmeix7qyrtrg8ylvdi3mpgay6c14dbczcy6k1ztpp0row2x4z468rnk8lkkwckalt6adefevbyzcn2qyr9brp8i5/upsgk6m1nezr8ypgexxxxunbhkyxu/lzuuso1e4xxhnfier1klasoom13yvtwv0fr5ftag2j5m+ii8/xneyntyha4hbiffooxu1fi9vguezjvsj0zwjret98i4o3yvnzxclouepxhlh/j1ezm1nrrqs6nngf+8tns1f7m0d34w8kpp3l61qunhr9owyvk58sep968gvxjstpw1y8viy15oeje7c6dyzchmkijl++woacf5v57stwcjbk+vdnjgvheuwnratjbdzfufzwbgmcdq6mlslxrjlq9jcuztl2h4hz6deem9fi0jt42u3mm1mhrf7sfwr7ahlhkali0xlvviuc0it2fbol3igowsz+rwft61+dy6lz1dgfc4qk1jkkon+iepbbdv3kcawfdgcjjsuhse3lnllv56hyhr7fa9su51oq0hij78199hvcpxtppq9lmiz274f+grmx8hvfavafy57z7tbrupvakfdy/a14mdy+hn7om7thgvponju472s/i9inu57zgzua8tu6d0r5mdlpwznclgiundvrywth2aab+yhapqmov3dzfdqvsdz598u65feldr/svtiy0st8wud/xnfvydc08vp+2rpvnvcnkus/kzvfd+kaf8acjwbqpjpwdhuflmcaegksefqfu/pxluluzepclrekrr0xvnizljyrvh7mdf+aez21witkkbk8wn5+c18/ijqe72phnbyr3ex5l8r9xkt7f4pwjc52oqcea5rryxe1d2z6ll6svdhf/dz4avrd4ur61gfsnu29eix5xzwd7v9biswjh6fu7vq6cwxzppu479z2aws4wveutbci4judax6aelfmvzrbu/ie54donfp9xfugejluw5567lxxpel2z0o3u8m+kxja4nnhh7tlpzzpflk2jhr2/gveyja87ekrfctj0sns9nzrwr/aa8zs+gxgmw0au7xxwsca5bpms81xjxd5i/inf4j2karw37thjw01dwlfwzolwwstiqeewpdtkfrjpx1fd2c9nf4ia1ei9op8lm9epyexlo3q/lsv1pfr3v47gzlubdx5ddumv+fyxtnwtz6mnh3uqkt2olxtpvgepq3eolss7yzo4y3t6v6lkm8fsbe7prlujho8sntvcqwlgltzooqlhfhavek8uvx9u7ypiv5voaq+v3nwjwraf+ubt0woprls07sf9dgivzt26nlfxa+lvt4cx4e0rvunvn/ahz5bea7k+/pxv5jkbx169xsmvx8l5e1ms8g4rsvob91exd9v1oc8a+clu/uy9rvm3ytaxbjblee+vbnd+ay5qxsae2x77nghbq+r3z7f481hfahgqbxfiqyrqbia3/pvuf+vxncot4b67vuukdez5t4im3ounph8f6z8ux9xnexm11duxllctix7knrx6vsioruybhywklkrnyqvxqfanlwlsb7urxunkirx+vfl/tanglvgn2up93zvlwiouduhk2jb2otyjcfrjj0xxmvalst5qkrskvksd5o4pqezrhfqag4yesfwrki1sttrunc8s+kvxftw6k+i6rkbdmpmkq/dj6ge9fuzhkeswkq9de72ofhy7dzvs562s+i/x+keiegibnxndfulp2lmlcbwpqtx3woldc4duoajhi8nwqzjj6my4h3fr/8a+zfhz4vek1s3iup5ak46zpavzirs9phn/m29d1s2x6xn5nl37x3i+oo803wzbka9sgubpf6b2+6d9bz+nfz5bg/yuukj5t140mk5pet081/w58wtzbh3ffurifoyivzi+ulsao8/eyawgzbjythfw96/gkidp3eq/wrerpjqqqqedjeiejzvfgmfuk1kso5y5vhvlr97y8w8a/gooaywhhl/mk2ltde8a99tfw5xw25jtxei7hmy7okoe9yl70/wx+foen3dxpdztdxehlkkjz2c5jj/lx3foeacvckskfe4mruxfr1aju3vf8atsdp8mrap7xasta7tis1efnc/dkj7xhekqox+06u59oecda0pw3pv14i1irlsdltjk+ecgd+dfozzs+tsulxs2phz6nvqknkgjl+b8ofelxlqpxd8a6r4nluqt7cvigy52pn5v/ayr7ykoyecj1pgquk+mmou1aedezfi0pi/mkg4/prlen6i6awurpvmnqz1tuvivp2nts0uixjkohk7eb+h5p6v8hqyorw1rpl/fn2lfmqfdz8z/d7zg9c8va5r8jg9vgezpeq4ud6v9fhcvw+ex7uovc+exmaynfpwt5y9jddsqkazz613p31pgnhlvlqqupxtb5iq4s5akwlzhphw4hrbwkwzgnk4jycv8vncm5umdbn6lkczqyync2up2/xq+ktanoaedpd7p9kenfu5k/5aec4z6vgt4v4snzpdnpwwstk56zf4hkht1gfrdvfevz9yxhkkowvhvkjgsdmnzkewvr9siyrj7pj+tdcbpinbdtsiqb2xv3odws8inx6vszhui+hpywzlkvmtodnbfz1qnkrjnzl2cdaaljxoqtuu4rurfeyq4g5sdrxkvhcu7t6n3dboeftsskm+zynjtvqt1o3kyqudjxztpxl69igsplekcvaehhupe9fovprg4a61rhvhdwti9ci0lddtbqr486l7dfs7hph6u+ch4et6fq00g3btkmznwqgck1luxhid2hylvep1puo5svbrt4lbjd3+uudvc57d1r5+rmnplrntuvz4aplfgtqwllrb7nzxdcjt2n0rjo17t5pscz8suzswwsvil2ii0ro+s/qe/vxoqrzq77mvnekiuhkxuucaqaqdv3idwtxbtk5mustc8mz0+m5heumb5uite6jpjg7axn0ntzag/sfzwsnbspd5vv9jndrwdodt+8rxhicx7l3y6s1hrgnzm7dwdokxf9jftrbejoiyemo+pfpxl5jxxsvzj6seoqyilfdtttrq2yuscugfsomk+fpo7v1scs5yanp6heqxx7lius9oop+vtxfcm6sveehson6s47wi2dvemetyzrjopt8k9ndo10zpopbs5123hccw3edpxxpjw0nxbdpcq3c4or9dw8gcgjgk7o0fc8eer6ta2l4cy5hg4lxmscv+5g5qhhq068bz7xpqperw1twjgirej+rva4affn0l1k15hrs95rm93udd4xtrdi7gnylcysc2o/brkzgtuc9fwbnc+bbujcasrlbkdbxjhlzr17hld3lqctp1vfi93dsatiuczpsu+rjprgtjsnojimrjb8l1b3jgjtg13j8sliq7aoxv0w1llihgf80jg+ma9sk3uscuxvgbsmzv0uhdcnandsnky4lwbr//9k="; var canvas = document.createelement('canvas'); canvas.width = 650; canvas.height = 481; var ctx = canvas.getcontext("2d"); var image = new image(); image.onload = function () {     ctx.drawimage(image, 0, 0); }; image.src = base64; $('#showimage').html(canvas); 

change onload function body

ctx.drawimage(image, 0, 0, 650, 481);