Javascript, displaying a transparent image.

Question

<!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.

Niet the Dark Absol · Accepted Answer · 2014-04-04 10:47:39Z

1

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!

answered Apr 4, 2014 at 10:47

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

reidjako Over a year ago

How would I add it as a data file? Thank you

Niet the Dark Absol Over a year ago

Personally I use a PHP command-line script: <?php echo 'data:image/png;base64,'.base64_encode(file_get_contents($_SERVER['argv'][1])); Run that and it will output the data: URL for your image.

reidjako Over a year ago

Ahahahaha I did know that, far out I am slow today. I was thinking about doing it in js which is impossible right? Secondly onload where abouts would I put this into my code?

Niet the Dark Absol Over a year ago

If you have the .src = '..' code somewhere in your initialisation, and .drawImage inside a rendering loop, then you don't need onload - it just won't draw the plane until it has loaded.

Gio · Accepted Answer · 2014-04-04 10:50:57Z

1

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).

answered Apr 4, 2014 at 10:50

Gio

8391 gold badge5 silver badges11 bronze badges

2 Comments

reidjako Over a year ago

Where abouts would I put this into my code, I do not quiet understand this concept. Probably because of the time of day sorry.

Gio Over a year ago

in planeDraw(), just after creating the new Image object

Collectives™ on Stack Overflow

Javascript, displaying a transparent image.

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related