drawImage (canvas) is not working

javascript html canvas html5-canvas drawimage

13,436

Solution 1

Your images have no source. Add one if you want to see something. The onload function cannot be called as long as you don't have a src.

And you must provide the image to the drawImage function :

 var imageObj = new Image();
 imageObj.onload = function() {
   context3.drawImage(imageObj, 50, 25);
   context3.drawImage(imageObj, 100, 25);
 };
 imageObj.src = "someFile.png";

If what you're trying to do is draw canvas1 and canva2 on context3, simply do all this outside the imageObj.onload function which is never called : http://jsfiddle.net/KCyvE/

A precision following a question in comment :

My code in the fiddle uses context1.canvas. This works because The context is an instance of CanvasRenderingContext2D and thus has a property named canvas which is a "Back-reference to the canvas element for which this context was created".

Solution 2

Your imageObj.onload function is somewhat wrong. This is what you want: http://jsfiddle.net/4xT2j/3/

Please observe there isn't necessarily a reason to write canvas3 to an image object since it already is an image object.

13,436

Author by

Muhammad Usman

A decade of professional programming experience of building stuff across the stack( backend, frontend, infrastructure) https://www.linkedin.com/in/ranasaani

Updated on June 29, 2022

Comments

Muhammad Usman almost 2 years

I want to draw multiple canvases on a single canvas using drawImage() method but it is not working Code

<html>
 <head>
  <script>
    window.onload = function() {
    var context1= document.getElementById("canvas1").getContext("2d");
    var context2  = document.getElementById("canvas2").getContext("2d");
    var context3  = document.getElementById("canvas3").getContext("2d");

    context1.font = "20pt Calibri";
    context1.fillStyle = "blue";
    context1.fillText("Hello ", 50, 25);

    context2.font = "20pt Calibri";
    context2.fillStyle = "red";
    context2.fillText("World!", 100, 25);

    var imageObj = new Image();
     imageObj.onload = function() {
      context3.drawImage(context1.canvas, 50, 25);
      context3.drawImage(context2.canvas, 100, 25);
        };
  };

</script>
 </head>
<body>
<canvas id="canvas1" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas2" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas3" class="canvas" width="200" height="50"></canvas>
</body>
</html>

JS Fiddle http://jsfiddle.net/4xT2j/2/

Denys Séguret almost 12 years

Your images have no source. What are you expecting to see ?

Muhammad Usman almost 12 years

I want to add canvases not any image
Denys Séguret almost 12 years

So don't create an ImageObj. If what you're trying to do is draw canvas1 and canva2 on context3, simply do all this outside the imageObj.onload function which is never called.
Denys Séguret almost 12 years

I added a fidlle to explain that you just have to remove the ImageObj and simply include the content of the onload.
Alston over 11 years

@dystory Excuse me, according to your code on the jsfiddle, I found this instrument:　"context1.canvas". What does this mean? Please help me give me some references, I can't find any explanation on the htmlV spec and many other place rather than chrome developer's hint...
Denys Séguret over 11 years

@Stallman I've edited my answer to answer your precise question, with a reference to the excellent MDN.
Doug Hauf about 10 years

What if I want to draw one .jpg at a specific location on a canvas. (specifically a poker card)