simple HTML5 canvas image not displaying

I'm new to this - I just can't figure out why this isn't working. When I remove Display:none from HTML, the image works correctly so I know the path to the image is correct. But it's not drawing on the canvas. Thanks for your time.

HTML:

<canvas width="840" height="900" id="Canvas6">
     Your browser does not support this feature.
    </canvas>
<img src="image/logo.png" id="img1" width="825" height="272" style="display:none;">
<script type="text/javascript" src="js/main.js"></script>

Main.JS JAVASCRIPT:

var theCanvas = document.getElementById('Canvas6');

if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {

        //Create a variable to hold our image
        var  srcImg = document.getElementById("img1");

        //Draw an image directly onto the canvas
        ctx.drawImage(srcImg, 0,0);

        //Draw a scaled down image
        //drawImage(srcImg, dx, dy, dw, dh)


    }
}

In html file, the first best thing you have done is used the 'script' tag right at the end of the html file. This ensures that the "Critical Render Time" is minimized, and the display items in HTML are shown first. (Not a huge impact on this case, because here you are using the JS to draw/display, but this approach is really good when you use your js for other purposes like calculations etc., and you don't want to stop the other HTML items from displaying because of an ongoing calculation.)

Now that the canvas is ready, its time to throw the image on the canvas.

Try using the border property (style="border: 2px dotted black") to see the container area of the canvas.

Hmmm !! But the image doesn't show in canvas. WHY ??

Images(or any other files) take atleast some time to get processed. By the time they are getting processed to be loaded on the screen, your canvas is already getting displayed. Hence you see an empty canvas.

So, the solution is to make everything else wait, till the time image gets loaded.

How do we do that ? Just use the "Event Listener".

EventListener is the property of Window object. (window.addEventListener("load", some_func_to_run , false);). We generally use this, when we want our window/page/browser to wait for something, but hey , we can use it for our images as well.

var cvs = document.getElementById("canvas"); // Getting the control of the canvas
var ctx = cvs.getContext("2d"); //Getting the control of the useful HTML object getContext . This object brings in a lot of useful methods like drawImage, fillRect etc. 


//create images

var bg = new Image(); // Creating image objects
bg.src = "images/bg.png"; //Setting the source file

//create images ends


//load images first
bg.addEventListener("load" , draw , false); //**IMPORTANT : Just remove this line and you will start facing this problem of empty canvas again 

//loading images ends

function draw() {
    ctx.drawImage(bg,0,0);   // Putting the image and its coordinates on the canvas  
}

draw();  // Calling the draw function to put the image on canvas
<html>
   <body>
           <canvas id="canvas" width="288" height="512" style="border: 2px dotted black">            </canvas>
           <script src="flappyBird.js"></script>
   </body>
</html>

javascript - simple HTML5 canvas image not displaying, When I remove Display:none from HTML, the image works correctly so I know the path to the image is correct. But it's not drawing on the canvas. Thanks for your  drawImage is the method used to display or "draw" an image on canvas. You might, or not already know that it's not as simple as just passing the URI of the image to it. You might, or not already know that it's not as simple as just passing the URI of the image to it.

If you try to place an image on a Canvas before it has loaded, it will not show. It is not like the img tag that will show the image whenever it loads. I surrounded your JS with an onload and it worked for me.

document.getElementById("img1").onload = function() { /* Your JS */ };

html5-canvas, Make sure your image object is fully loaded before you try to draw it on the canvas with context. drawImage . Otherwise the image will silently fail to display. In JavaScript, images are not loaded immediately. You can also check the status of Canvas servers, but that is rarely the issue. If images are not showing up in one course but they show up fine in others, it may be because you (or the course builder) copied and pasted images into the course rather than uploading images into the course.

You have to wait for the image to load before you can draw it on the canvas, so set your drawing code to run on the window load event (by which time all images are loaded). Also, you don't need to include the markup for the image on the page, where you have to then prevent it from displaying with CSS. You can just create the image object and set the source attribute in the javascript. For example:

var img = document.createElement('img');
img.src = 'image/logo.png';
window.addEventListener('load', function(){ 
    var theCanvas = document.getElementById('Canvas6');
    if (theCanvas && theCanvas.getContext) {
        var ctx = theCanvas.getContext("2d");
        if (ctx) {
                ctx.drawImage(img, 0,0);
        }
    }
});

How displaying an image on HTML5 canvas works, drawImage is the method used to display or "draw" an image on canvas . You might, or not already know that it's not as simple as just passing  Drawing an image on the HTML5 canvas The easiest way to use an image in a canvas element is to use an image already available on the Web page. You can put an image on the page with the ordinary <img> tag and use the CSS display: none rule to make the image invisible.

Drawing an Image onto a Canvas · WebPlatform Docs, We'll look at how to load the image from various sources, how to display the image on A simple html layout with both the image and the canvas already loaded as DOM elements in our page. getElementById("html5"); var canvas = document. This is not attached to the DOM and is not part of the page. var image = new  The HTML5 canvas element can be used to write image filters. What you need to do is draw an image onto a canvas, read back the canvas pixels, and run your filter on them. You can then write the result onto a new canvas (or heck, just reuse the old one.) Sounds simple? Good. Let's get cracking! The original test image Processing pixels

Using images, Importing images into a canvas is basically a two step process: being presented by a <video> element (even if the video is not visible). For example, if you have a <video> element with the ID "myvideo", you can do this: The drawImage() method draws an image, canvas, or video onto the canvas. The drawImage() method can also draw parts of an image, and/or increase/reduce the image size. Note: You cannot call the drawImage() method before the image has loaded.

How to use the canvas drawImage function, An example of drawing an image on the canvas ( drawImage() with 5 arguments) If you start to use the function it may not appear to work - you need to note that the image This allows you to select a section of your image to display. Fortunately the HTML5 video tag allows for multiple versions of the same video each  If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas. Using other canvas elements Just as with normal images, we access other canvas elements using either the document.getElementsByTagName() or document.getElementById() method.

Comments
  • Seems to work fine... jsfiddle.net/YHER3
  • Hmm, thanks for taking a look. Must be a conflict with my other JS code then.
  • @loxxy try it with onDomready instead of onload jsfiddle.net/YHER3/1
  • If you want to get a bit fancier try this: var img = new Image(); img.onload = function() { ctx.drawImage(img, 0,0); }; img.src = 'http://www.online-image-editor.com/styles/2013/images/example_image.png';