drawImage() with wrong coordinates canvas

1
votes

i have a problem: I'm working on map generator, using html canvas, the user inputs X,Y, width and height of an image. But when i use drawImage with users input, the image doesn't fit the Canvas XY and the select height and width in pixels. Is there anything that I can use to 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>
2
javascripthtmlcanvas
Can i see the code you have tried so far?? – AkshayJ
Unless you provide code, we'll have no idea what's not working. – Oliver
Oh, sorry, posted the code – Eshkation

2 Answers

1
votes

Ground was undefined. I've put it in for 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 the 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 was 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>
1
votes

Your code works perfectly.Just add this to the page(create an image object)

     <!DOCTYPE html />
    <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");
var ground=new Image();
    ground.src = 'http://i.imgur.com/Z3DyMAM.png'
    ground.onload = function (){
    context.drawImage(ground, co[0], co[1], co[2], co[3]);
    }
    }
    </script>
    </html>