CODEWITHSUNDEEP
javascripthtmlcanvas
tdammon
tdammon

Reputation: 589

Cannot render an image when source passed in as a variable

I am writing a code that takes in an image and pastes it into an HTML canvas. The code works when I declare my <img> in the HTML file, but this does not allow the user to input a new file.

Here is the html structure (the program works if the tag line is put back in: 

 <style type='text/css'>
            canvas{
                border: 10px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id='balls'>


        </canvas>
        <canvas id='hide' style:'border: 10px solid black;'>
                <!-- <img id="taco" width="300" height="300"  src="prime.png"> -->
        </canvas>
        <div>
            <input id='url' placeholder="image url">
            <button id='submit'>Submit</button>
        </div>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <script src="client.js" async defer></script>
    </body>
</html>

Here is the portion of JS code I am working on:

$(document).ready(onReady);
var canvas = document.querySelector('canvas');

canvas.width = 300;
canvas.height= 300;
let bounced = false;
let newPic = `id="taco" width="300" height="300"  src="prime.png"`


function onReady(){
    $('#submit').on('click', updateImage)
    $('#hide').empty()
    $('#hide').append(`<img ${newPic}>`)
    makeCanvas();
    setup();
    animate();

}


function updateImage() {
    newPic= `id="taco" width="300" height="300"  src="${$('#url').val()}" alt="prime.png"`
    //console.log(newPic)
    $('#hide').empty()
    $('#hide').append(`<img ${newPic}>`)
    makeCanvas();
    setup();
    animate();
}
 let c, can, ctx, img

function makeCanvas(){
 c = canvas.getContext('2d');
 can=document.getElementById("hide");
 console.log(can)
 can.width = 300;
 can.height = 300;
 ctx=can.getContext("2d");
 img=document.getElementById("taco");
 ctx.drawImage(img,10,10);
 console.log(img)
 console.log(ctx.drawImage(img,10,10))
}

My console.log statements for img are identical when the code in the HTML file is placed back in.

Upvotes: 1

Views: 107

Answers (1)

user10251509
user10251509

Reputation:

When you're setting up your canvas, your image isn't loaded at all. So your ctx.drawImage(img,10,10); call just draws... an unloaded image... an empty set of bytes... Nothing.

So you should first load your image. After that, drawing stuff will easily be done. Here's a little code example:

var canv, ctx, img;
function setup() {
  //Setting up canvas

  //Fetching Context
  ctx = canv.getContext("2d");

  //Now drawing our image
  ctx.drawImage(img,10,10);
}
img = new Image();
img.onload = setup;    //We'll setup the canvas after the image is fully loaded
img.src = "your/path/or/variable/pointing/to/your/image.ext";

Hope it helps!

Upvotes: 2

Related Questions