reidjako
reidjako

Reputation: 384

Javascript, displaying a transparent image.

<!DOCTYPE html>
<html>
<head>
<style>
    #container { 
    width: 320px; 
    height: 480px;
    border: 1px solid red;

    }
</style>

</head>
<body>


<div style="position: relative;" id="container">
 <canvas id="myCanvas" width="320" height="480" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas id="plane" width="320" height="480" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

 <canvas id="canvas2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<img id="scream" src="http://4.bp.blogspot.com/-BrJHwoqM2qg/Uq94Il8t-1I/AAAAAAAAD7s/vyFLZUgMkdA/s1600/Plane.png" alt="The Scream" width="0" height="0">



<script>
var c=document.getElementById("myCanvas");
var c2=document.getElementById("canvas2");
var c3=document.getElementById("plane");

var plane;
var ground;
var score1 = "1"
var score = score1;
var increase = 6;
var delay = 40;
var scorez;

start();

function start(){
    backgrounds();
    planeDraw();
    var scorez = setInterval(scoring, delay);

}


function backgrounds(){
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,0, 280);
    my_gradient.addColorStop(0,"white");
    my_gradient.addColorStop(1,"blue");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(0,0,320,480);

    ground = c.getContext("2d");
    ctx.fillStyle="black";
    ctx.fillRect(0,450 , 320 ,30);

}

function scoring(){
    scores();
    score2();

}
function scores(){
    score -= 3-(3+increase);
}
function score2(){
    //var canvas = document.getElementById('canvas2');
    var context = c2.getContext('2d');
    context.clearRect(0, 0, c2.width, c2.height);
    var w = c2.width;
    c2.width = 1;
    c2.width = w;

    var text=c2.getContext("2d");
    text.font="20px Georgia";
    text.fillText(score ,15,20);

}


function hit(){

}

function loes(){
    clearInterval(scorez);

}

function planeDraw(){
    plane = c3.getContext('2d');
    var img = new Image();
    img.src = "http://4.bp.blogspot.com/-BrJHwoqM2qg/Uq94Il8t-1I/AAAAAAAAD7s/vyFLZUgMkdA/s1600/Plane.png"; //transparent png

    plane.drawImage(img, 0, 0, 320, 100);

}
</script> 
<!--
http://4.bp.blogspot.com/-BrJHwoqM2qg/Uq94Il8t-1I/AAAAAAAAD7s/vyFLZUgMkdA/s1600/Plane.png

--!>
</body>
</html>

All the code seems to be working fine, the only issue I am finding is the image of the plane is not printing. Could some one please tell me what I am doing wrong. Thank you. When I changed the planeDraw function to create a rectangle it worked perfectly. As well as this the code worked in JSFiddle, when it was isolated.

Upvotes: 0

Views: 1509

Answers (2)

Gio
Gio

Reputation: 839

You have to wait for the image to load before drawing it. Try:

img.onload = function()
{
    plane.drawImage(img, 0, 0, 320, 100);
};
img.src = "http://4.bp.blogspot.com/-BrJHwoqM2qg/Uq94Il8t-1I/AAAAAAAAD7s/vyFLZUgMkdA/s1600/Plane.png"; //transparent png

It's best to define the onload function before setting the src attribute - depending on the browser, if the image file is in your cache, the onload event may fire as soon as the src is set (before you have a chance to define onload).

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

You are drawing the image before it has loaded.

Load the plane image once, and draw it after its onload event has fired.

If you can, consider embedding the image as a data: URL, as this will remove the need for waiting for the image to load, however keep in mind that it makes your code bigger!

Upvotes: 1

Related Questions