0

The JSFIDDLE

Here is my problem: I want to draw the image in the second line of the console when I double click on "Get JSON DATA", in my canvas.

I hope that was clear. I think it's a bit difficult...

Here is my code :

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="test1" width="200px" height="200px"> </canvas>
<input id="urlBanner" type="text" style="width:450px;" maxlength="100">

<button type="button"  value="Get JSON Data" onclick="getUrlBanner()">Get JSON data</button>

<script>
function getUrlBanner()
{
    var urlBanner = document.getElementById("urlBanner").value; 
   console.log(urlBanner);


var urlAPI = "https://pixabay.com/api/?key=10642718-3227f97c509ef5fe89537eec9&q=";
//var full = "full:" + urlBanner; 
//console.log(full);

$(document).ready(function(){
  $("button").click(function(){

        fetch(urlAPI+urlBanner+"&image_type=photo")
    .then(res => res.json())
.then((out) => {
        var img = out.hits[0].largeImageURL;
        document.getElementById('test1').src = img;
        console.log(img);
        console.log("full : " + urlAPI+urlBanner+"&image_type=photo");
}).catch(err => console.error(err));

  });
});
}
$(document).ready(function() {
  $('#test1').each(function() {
 var myCanvas = document.getElementById('test1');
var ctx = document.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img[0],10,10); 
};
img.src = 'UrlBanner';
  });
});

</script>
</body>
</html>

My API works properly, that's ok. In fact, the problem is really here I think

$(document).ready(function() {
      $('#test1').each(function() {
     var myCanvas = document.getElementById('test1');
    var ctx = document.getContext('2d');
    var img = new Image;
    img.onload = function(){
      ctx.drawImage(img[0],10,10);

I can't get it... The jpg file in console need to appear in my canvas.

Thanks in advance,

geen21
  • 21
  • 5
  • 1
    Too much to tell, not enough time, but basically you are making it complicated. https://jsfiddle.net/53ua1tcf/ – Kaiido Jan 31 '19 at 08:45
  • Hmm yes, i know i'm making it to difficult... Sorry for that, thanks for this fiddle! – geen21 Jan 31 '19 at 08:50

0 Answers0