Draw a canvas into another canvas not working

Question

I am trying to draw a canvas created through javascript on another canvas. But it is not working for me,

Here is my code,

    <!DOCTYPE HTML>
<html>
  <head>
    </script>
       <script>
        window.onload = function(){  
        var can1 = document.createElement('canvas');
        can1.width = 150;
        can1.height = 140;
        can1.style.cssText = 'top:2px;left:2px;border:2px  solid black;';

        var ctx1 = can1.getContext('2d');
        var img=new Image();
        img.src="images/211.jpg"
        ctx1.drawImage(img,0,0);

        var can = document.getElementById("c");
        var ctx = can.getContext('2d');
        ctx.drawImage(can1,0,0);
        var canvas =  document.getElementById("c"); 
        window.open(canvas.toDataURL());
        }

    </script>
</head>
<body >
    <canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px  solid black;"></canvas>
</body>
</html>

Why do you think it does not work? Btw, you did not draw anything into can1. — Bergi, Jul 12 '12 at 10:54
I have tried that by drawing an image into can1. Still in the above code, the canvas' boundaries should appear! — MJQ, Jul 12 '12 at 10:56
What do you mean by "boundaries"? If there is no content, no content will be drawn, and the border does not belong to the content. — Bergi, Jul 12 '12 at 11:09

score 11 · Accepted Answer · edited May 23 '17 at 10:34

I think the problem was that, when you were trying to drawImage that image into the canvas, image was not ready. so if u do this it works perfectly:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {

        var imageObj = new Image();
        imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";

        var dynamicCanvas = document.createElement("canvas");
        var dynamicContext = dynamicCanvas.getContext("2d");
        dynamicCanvas .height="400";
        dynamicCanvas.width="578";

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        imageObj.onload = function() {
          dynamicContext.drawImage(imageObj, 69, 50);
          context=context.drawImage(dynamicCanvas,69,50);
          window.open(canvas.toDataURL());
        };
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
  </body>
</html>

and you can adjust the height and width of the dynamic canvas.

if you remove that window.open statement, its perfect.

but there is a problem with canvas.toDataURL()

when you try to do canvas.toDataURL() for a local file, it gives a security error (if you inspect it through google chrome) i.e.

Uncaught Error: SECURITY_ERR: DOM Exception 18

you can know more about this error : here (see if you are getting this error). anyways, the root cause is sorted out, and there's a new problem now altogether :D..anyways better luck!!

kaigorodov · Answer 2 · 2014-06-25T11:04:16.577

The problem with an incorrect image display using the original code of MJQ is that he doesn't stated the size of the second canvas directly through attributes - only through style. Thus browser created a canvas of default size (300x150 for FF) and then stretched it to 250x350.

So the following modification will solve the image display:

<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px  solid black;"></canvas>

Maybe this will help someone in the future.

score 1 · Answer 3 · answered Jul 12 '12 at 10:55

1

what are you taking about? your code is working.

(If am getting your question correctly) I added following lines after

can1.style.cssText='border:2px solid black;';

:

        var ctx1 = can1.getContext('2d');
        ctx1.rect(50, 50, 500, 500);
        ctx1.fillStyle = '#8ED6FF';
        ctx1.fill();

and upon execution, i see a beautiful rectangle inside!! are you using html5 supporting browser??

answered Jul 12 '12 at 10:55

Manish Mishra

12,163
5
35
59

1

Ok. I tried it and it is working fine. But If I draw image in the canvas and draw that canvas into the other, it doesn't show up! – MJQ Jul 12 '12 at 11:02
OK. I have updated the code above. Image show up but not correctly. The size doesn't appear as 150,140. While in window.open(canvas.toDataURL()); as new tab opens, it is correctly shown! – MJQ Jul 12 '12 at 11:16

Draw a canvas into another canvas not working

3 Answers3