I am trying to get an image file to display on the Canvas but it seems no matter what I try it will not show up on the canvas. I have tried several examples that I have found online and nothing seems to work.

I would appreciate any help you can give on what might be the issue.

Here is my HTML:

Working with JavaScript

        <h3>Puzzle Time</h3>          


        <canvas onclick="fillCanvas()" id="myCanvas" width="600" height="450" style="border:1px solid #CCCCCC;"></canvas>          

        <script type="text/javascript" src="puzzle.js"></script>
        <script src="//code.jquery/jquery-1.10.2.js"></script>
        <script src="//code.jquery/ui/1.11.0/jquery-ui.js"></script>               


    </div>

Here is my JavaScript:

function fillCanvas()
{
   alert("filling Canvas");
   var cxt = document.getElementById("myCanvas").getContext("2d");
   var img = new Image();
   img.src = "Images/Chrysanthemum_small.jpg";

   img.onload = function()
   {
     ctx.drawImage(img,600,450);   
   };
   alert("done with Canvas");


}

I get the function to work however no image will appear.

I have tried to add the image element to the HTML and call the element in the function to draw it on the canvas but again the function will perform but no image will display on the canvas.

I am trying to get an image file to display on the Canvas but it seems no matter what I try it will not show up on the canvas. I have tried several examples that I have found online and nothing seems to work.

I would appreciate any help you can give on what might be the issue.

Here is my HTML:

Working with JavaScript

        <h3>Puzzle Time</h3>          


        <canvas onclick="fillCanvas()" id="myCanvas" width="600" height="450" style="border:1px solid #CCCCCC;"></canvas>          

        <script type="text/javascript" src="puzzle.js"></script>
        <script src="//code.jquery./jquery-1.10.2.js"></script>
        <script src="//code.jquery./ui/1.11.0/jquery-ui.js"></script>               


    </div>

Here is my JavaScript:

function fillCanvas()
{
   alert("filling Canvas");
   var cxt = document.getElementById("myCanvas").getContext("2d");
   var img = new Image();
   img.src = "Images/Chrysanthemum_small.jpg";

   img.onload = function()
   {
     ctx.drawImage(img,600,450);   
   };
   alert("done with Canvas");


}

I get the function to work however no image will appear.

I have tried to add the image element to the HTML and call the element in the function to draw it on the canvas but again the function will perform but no image will display on the canvas.

• javascript
• html
• canvas
• html5-canvas

• You're using ctx.drawImage(img, 600, 450) while the variable is cxt – Nick Rameau Commented Aug 12, 2014 at 19:55

2 Answers 2

Your code should be:

function fillCanvas(){
alert("filling Canvas");
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image();

img.onload = function()
{
ctx.drawImage(img,0,0,600,450);   
};
img.src = "Images/Chrysanthemum_small.jpg";
alert("done with Canvas");}

You set start coordinate to 600 and 450 so you draw image outside canvas, and it is better if Onload function is before img.src.

Your code should be:

function fillCanvas()
{
   alert("filling Canvas");
   var ctx = document.getElementById("myCanvas").getContext("2d");
   var img = new Image();
   img.src = "Images/Chrysanthemum_small.jpg";

   img.onload = function()
   {
     ctx.drawImage(img,600,450);   
   };
   alert("done with Canvas");


}

You were using ctx.drawImage(img,600,450); while the variable was cxt