javascript - drawImage() with wrong coordinates canvas -
i have problem: i'm working on map generator, using html canvas, user inputs x,y, width , height of image. when use drawimage users input, image doesn't fit canvas xy , select height , width in pixels. there can use solve this?
<html lang=''> <head> <title>map tools</title> </head> <body> <div align='center'> <canvas id='map' class='mapcanvas' width="800" height="400"> </canvas> <p><a href="#" onclick="loadxml()" class="submitbutton">send</a></p> <textarea id="xmlinput" class="inputtextarea" placeholder="coords"></textarea> </div> </body> <script> function loadxml(){ co = document.getelementbyid("xmlinput").value.split(',') // x, y, h, l canvas = document.getelementbyid("map"); context = canvas.getcontext("2d"); ground.src = 'http://i.imgur.com/z3dymam.png' ground.onload = function (){ context.drawimage(ground, co[0], co[1], co[2], co[3]); } } </script> </html>
ground undefined. i've put in you.
<html lang=''> <head> <title>map tools</title> </head> <body> <div align='center'> <canvas id='map' class='mapcanvas' width="800" height="400"> </canvas> <p><a href="#" onclick="loadxml()" class="submitbutton">send</a></p> <textarea id="xmlinput" class="inputtextarea" placeholder="coords"></textarea> <img id='ground' style='display: none' /> <!--you forgot image!--> </div> </body> <script> function loadxml(){ var co = document.getelementbyid("xmlinput").value.split(','), // x, y, h, l canvas = document.getelementbyid("map"), context = canvas.getcontext("2d"), ground = document.getelementbyid('ground'); //ground undefined! ground.src = 'http://i.imgur.com/z3dymam.png' ground.onload = function (){ context.drawimage(ground, co[0], co[1], co[2], co[3]); } } </script> </html>
Comments
Post a Comment