CODEWITHSUNDEEP
javascripthtml5-canvas
Lijin Durairaj
Lijin Durairaj

Reputation: 3501

How to bring one canvas context over the top of another?

I am using two images in a canvas, now i want to bring one image over another, ie. i want to bring the plane over the sky, how can i do that?

here is my code

var canvas = document.getElementById('canvas');
var skyContext = canvas.getContext('2d');
var planeContext = canvas.getContext('2d');
var sky = new Image();
 sky.src = './images/m35.jpeg';
sky.onload = function () {   
    skyContext.drawImage(sky, 0, 0, 250, 250, 50, 50, 250, 250);
}

var plane = new Image();
 plane.src = './images/space-ship.png';
plane.onload = function () {   
    planeContext.drawImage(plane, 0, 0, 70, 80, 50, 250, 70, 80);
}

In the above code, the sky is coming at the front of the plane making the plane invisible. I also tried to use the same context like this but i am not able to bring the image at the top of another.

Upvotes: 3

Views: 3051

Answers (2)

dougtesting.net
dougtesting.net

Reputation: 571

The issue with your code is that the images are drawn once loaded and I would suspect that because the sky image is larger than the plane image it takes longer to load so the sky image is being drawn second.

Drawing things on canvas works like layers in photoshop with whatever is drawn last overwriting things drawn before it.

It is possible to use the same canvas for both the sky and the plane, you just need to wait until both images have loaded then draw them in the correct order to the sky is drawn first, then the plane on top.

You can use the same canvas context for both objects if the are on the same canvas, no need to create multiple contexts (2 just point to the same place anyway). Usually when I work with canvases I just create one context variable called ctx as its a lot quicker than typing context.etc all the time.

almcd answer is one way to do it, though to me the background and main are reversed; I would put the sky / galaxy on the background and draw the plane on the main canvas, but there is a better way...

If the sky never changes, 2 canvases is not even needed, just one canvas with a background image behind it; the sky. When it comes time to animate the plane, this method of having the background a static image means there is less to draw each frame of the game loop, so you will get better FPS.

In terms of a solution for you, I think 1 canvas with the sky as a background image positioned by CSS, and only the plane being drawn on the canvas is the best, here is the code for that...

<!doctype HTML>
<html>
    <head>
        <style>
            #canvasContainer {
                background-image: url('https://i.sstatic.net/xjj19.jpg');
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div id="canvasContainer">
            <canvas id="canvas" width="1200" height="600"></canvas>
        </div>
        <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // Load the plane and draw it.
            var plane = new Image();
                plane.src = 'https://i.sstatic.net/nHugQ.png';
                plane.onload = function () {
                    ctx.drawImage(plane, 100, 100);
                }
        </script>
    </body>
</html>

You can move the plane by changing the 100, 100 parameters sent to draw image, as these are the left and top used to position the plane image.

Kind regards, DouG.

Creator of Winwheel.js a feature packed JavaScript library for making spinning prize wheels on HTML canvas. See http://dougtesting.net

Upvotes: 0

almcd
almcd

Reputation: 1089

The most effective way to do this (especially as it looks like you're creating a game) is to use two separate canvas elements, positioned on top of each other using CSS.

For example:

var canvasMain = document.getElementById('canvasMain');
var canvasBackground = document.getElementById('canvasBackground');

var skyContext = canvasMain.getContext('2d');
var sky = new Image();
 sky.src = 'https://i.sstatic.net/xjj19.jpg';
sky.onload = function () {   
    skyContext.drawImage(sky, 0, 0, 250, 250, 50, 50, 250, 250);
}

var planeContext = canvasBackground.getContext('2d');

var plane = new Image();
 plane.src = 'https://i.sstatic.net/nHugQ.png';
plane.onload = function () {   
    planeContext.drawImage(plane, 0, 0, 70, 80, 50, 250, 70, 80);
}
.canvas {
    position: absolute;
    top: 0;
    left: 0;
}
<canvas id="canvasMain" class="canvas" width="700" height="500"></canvas>
<canvas id="canvasBackground" class="canvas" width="700" height="500"></canvas>

Upvotes: 1

Related Questions