Displaying one canvas to another

Question

I have a problem displaying one canvas to another. I do everything according to this solution

<script>
    var source = document.getElementById('hiddenCanvas');
    var source_ctx = source.getContext('2d');
    var img = new Image();
    img.onload = function(){
       source.width = img.width;
       source.height = img.height;
       source_ctx.drawImage(img, 0, 0, img.width, img.height);
       }
    img.src = 'icon.jpg';
    var destination = document.getElementById('visibleCanvas');
    var destin_ctx = destination.getContext('2d');
    destin_ctx.drawImage(source, 0, 0);
</script>

Well, first canvas element displays picture correctly, but whatever I do, the second canvas does not want to display a picture.

score 0 · Answer 1 · 2013-07-26T03:43:34.200

You are trying to draw the image from source before the image is loaded and the source even have the image.

Move the last draw operation inside the onload handler. Also remember to set the size for destination canvas:

var source = document.getElementById('hiddenCanvas');
var source_ctx = source.getContext('2d');

var destination = document.getElementById('visibleCanvas');
var destin_ctx = destination.getContext('2d');

var img = new Image();
img.onload = function(){
    source.width = img.width;
    source.height = img.height;
    source_ctx.drawImage(img, 0, 0, img.width, img.height);

    destination.width = source.width;
    destination.height = source.height;
    destin_ctx.drawImage(source, 0, 0);
}
img.src = 'icon.jpg';

@MaximErshov discovered another possible bug, please see update. You need to set destination canvas size as well (at least it is not clear if this is done). — , Jul 26 '13 at 03:44

score 0 · Accepted Answer · answered Jul 26 '13 at 03:22

<script>
function init()
{
    var source = document.getElementById('hiddenCanvas');
    var source_ctx = source.getContext('2d');

    var destination = document.getElementById('visibleCanvas');
    var destin_ctx = destination.getContext('2d');

    var img = new Image();
    img.onload = function(){
        source.width = img.width;
        source.height = img.height;
        source_ctx.drawImage(img, 0, 0, img.width, img.height);

        destin_ctx.drawImage(source, 0, 0);
    }
    img.src = 'arun.jpg';
}
</script>
</head>
<body onload="init();">
<canvas id="hiddenCanvas" />
<canvas id="visibleCanvas" />

Your code is not working because you are trying to access canvas element before it is loaded to dom

score 0 · Answer 3 · answered Jul 26 '13 at 03:26

The way you've currently structured the code, img.onload is executed after the destin_ctx.drawImage line. That means that your program flow currently looks something like this:

Image is told to start loading
Destination canvas is drawn using (currently blank) source canvas
Image finishes loading
Image's onload executes, causing the source canvas to be drawn to. The destination canvas is NOT updated, because the destin_ctx.drawImage operation is a one-time copy.

What you need to do is move the destin_ctw.drawImage call to a place in the execution flow where you know the source canvas will definitely contain the appropriate contents. In this simple case, moving it to inside the image's onload would work.

Here's a full (but simplified) HTML file that works for me in Chromium, with a changed image url:


    <script>
    function load() {
        var source = document.getElementById('hiddenCanvas');
        var source_ctx = source.getContext('2d');
        var destination = document.getElementById('visibleCanvas');
        var destin_ctx = destination.getContext('2d');
        var img = new Image();
        img.onload = function(){
           source.width = img.width;
           source.height = img.height;
           source_ctx.drawImage(img, 0, 0, img.width, img.height);
           destin_ctx.drawImage(source, 0, 0);
        }
        img.src = 'ship360_32.png';
    }
    </script>

    <body onload="load()">
    <canvas id="hiddenCanvas"></canvas>
    <canvas id="visibleCanvas"></canvas>
    </body>

Displaying one canvas to another

3 Answers3