Styjun

Can a USB hub be used to access a drive from two devices?

What is the shape of the upper boundary of water hitting a screen?

My professor has told me he will be the corresponding author. Will it hurt my future career?

Is there a minimum amount of electricity that can be fed back into the grid?

Was the 45.9°C temperature in France in June 2019 the highest ever recorded in France?

Machine Learning Golf: Multiplication

How to play a D major chord lower than the open E major chord on guitar?

How to factor a fourth degree polynomial

Why does "sattsehen" take accusative "mich", not dative "mir"? Even though it is not "me" that I'm looking at?

Wouldn't putting an electronic key inside a small Faraday cage render it completely useless?

Do Goblin tokens count as Goblins?

Why is there paternal, for fatherly, fraternal, for brotherly, but no similar word for sons?

Shipped package arrived - didn't order, possible scam?

Attach a visible light telescope to the outside of the ISS

Why does this function pointer assignment work when assigned directly but not with the conditional operator?

Does a Globe of Invulnerability spell block outsiders from teleporting inside with a spell?

Is this car delivery via Ebay Motors on Craigslist a scam?

Why do most airliners have underwing engines, while business jets have rear-mounted engines?

Chilling juice in copper vessel

How to find the version of extensions used on a Joomla website without access to the backend?

Implicit conversion between decimals with different precisions

Wearing special clothes in public while in niddah- isn't this a lack of tznius?

Do intermediate subdomains need to exist?

When moving a unique_ptr into a lambda, why is it not possible to call reset?

Why is my drawImage not accepting the '0+constant' for it's height param?

javascript onclick, anonymous functionSecurityException 1000, even though using same domainHTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best PracticesCanvas Unexpected Results / Behavior Using drawImage / putImageDataaccessing cache pictures phonegapIs an event triggered when an HTML link element (<a/>) containing base64 data as href is ready?Canvas drawImage is not accepting width and heightjavascript drawimage height incorrectWhy is 2-param drawImage faster than 9-param?How to fix this “mouse hover” function in a canvas

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm making a vanilla JS Flappy Bird, and am trying to create the gap between pipeTop and pipeBottom by setting the height of pipeBottom to the height of pipeTop plus a variable that should serve as a gap.

I'm following a tutorial, and my code appears to be the same as that of the tutorials - though my pipe images overlap one another, instead of displaying with a gap.

// Canvas and getContext

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');


// Load Images

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeTop = new Image();
var pipeBottom = new Image();

bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeTop.src = "images/pipeTop.png";
pipeBottom.src = "images/pipeBottom.png";

// pipe vars

var gap = 100;
var constant = pipeTop.height+gap;

// Draw Images

window.onload = function draw() 

 ctx.drawImage(bg,0,0);

 ctx.drawImage(pipeTop, 100, 0);
 ctx.drawImage(pipeBottom, 100, 0+constant);
 ctx.drawImage(fg,0, cvs.height - fg.height);
;

draw();

0+constant should leave the height of the bottom pipe equal to the gap + pipeTop's height, but that's not the case. Instead, the bottom pipe is overlapping the top pipe. (pictured above)

javascript

share|improve this question

asked Mar 25 at 20:54

JamesJames

981010 bronze badges

add a comment | 

1

I'm making a vanilla JS Flappy Bird, and am trying to create the gap between pipeTop and pipeBottom by setting the height of pipeBottom to the height of pipeTop plus a variable that should serve as a gap.

I'm following a tutorial, and my code appears to be the same as that of the tutorials - though my pipe images overlap one another, instead of displaying with a gap.

// Canvas and getContext

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');


// Load Images

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeTop = new Image();
var pipeBottom = new Image();

bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeTop.src = "images/pipeTop.png";
pipeBottom.src = "images/pipeBottom.png";

// pipe vars

var gap = 100;
var constant = pipeTop.height+gap;

// Draw Images

window.onload = function draw() 

 ctx.drawImage(bg,0,0);

 ctx.drawImage(pipeTop, 100, 0);
 ctx.drawImage(pipeBottom, 100, 0+constant);
 ctx.drawImage(fg,0, cvs.height - fg.height);
;

draw();

0+constant should leave the height of the bottom pipe equal to the gap + pipeTop's height, but that's not the case. Instead, the bottom pipe is overlapping the top pipe. (pictured above)

javascript

share|improve this question

asked Mar 25 at 20:54

JamesJames

981010 bronze badges

add a comment | 

I'm making a vanilla JS Flappy Bird, and am trying to create the gap between pipeTop and pipeBottom by setting the height of pipeBottom to the height of pipeTop plus a variable that should serve as a gap.

I'm following a tutorial, and my code appears to be the same as that of the tutorials - though my pipe images overlap one another, instead of displaying with a gap.

// Canvas and getContext

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');


// Load Images

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeTop = new Image();
var pipeBottom = new Image();

bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeTop.src = "images/pipeTop.png";
pipeBottom.src = "images/pipeBottom.png";

// pipe vars

var gap = 100;
var constant = pipeTop.height+gap;

// Draw Images

window.onload = function draw() 

 ctx.drawImage(bg,0,0);

 ctx.drawImage(pipeTop, 100, 0);
 ctx.drawImage(pipeBottom, 100, 0+constant);
 ctx.drawImage(fg,0, cvs.height - fg.height);
;

draw();

0+constant should leave the height of the bottom pipe equal to the gap + pipeTop's height, but that's not the case. Instead, the bottom pipe is overlapping the top pipe. (pictured above)

javascript

share|improve this question

asked Mar 25 at 20:54

JamesJames

981010 bronze badges

// Canvas and getContext

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');


// Load Images

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeTop = new Image();
var pipeBottom = new Image();

bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeTop.src = "images/pipeTop.png";
pipeBottom.src = "images/pipeBottom.png";

// pipe vars

var gap = 100;
var constant = pipeTop.height+gap;

// Draw Images

window.onload = function draw() 

 ctx.drawImage(bg,0,0);

 ctx.drawImage(pipeTop, 100, 0);
 ctx.drawImage(pipeBottom, 100, 0+constant);
 ctx.drawImage(fg,0, cvs.height - fg.height);
;

draw();

share|improve this question

asked Mar 25 at 20:54

JamesJames

981010 bronze badges

share|improve this question

asked Mar 25 at 20:54

JamesJames

981010 bronze badges

asked Mar 25 at 20:54

JamesJames

981010 bronze badges

asked Mar 25 at 20:54

JamesJames

981010 bronze badges

1 Answer
1

active

oldest

votes

1

Javascript does things asynchronously, including loading images. If you set the src in code it doesn’t load the image immediately. Therefore pipeTop.height is zero when you set constant. You need to set it later when everything has loaded.

share|improve this answer

answered Mar 25 at 21:01

Sami KuhmonenSami Kuhmonen

22.6k77 gold badges3333 silver badges5050 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! Moved my pipe variables into the function that waits for an onload
  
  – James
  Mar 25 at 21:06
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55346256%2fwhy-is-my-drawimage-not-accepting-the-0constant-for-its-height-param%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Javascript does things asynchronously, including loading images. If you set the src in code it doesn’t load the image immediately. Therefore pipeTop.height is zero when you set constant. You need to set it later when everything has loaded.

share|improve this answer

answered Mar 25 at 21:01

Sami KuhmonenSami Kuhmonen

22.6k77 gold badges3333 silver badges5050 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! Moved my pipe variables into the function that waits for an onload
  
  – James
  Mar 25 at 21:06
  

  
  
  
  

add a comment | 

1

Javascript does things asynchronously, including loading images. If you set the src in code it doesn’t load the image immediately. Therefore pipeTop.height is zero when you set constant. You need to set it later when everything has loaded.

share|improve this answer

answered Mar 25 at 21:01

Sami KuhmonenSami Kuhmonen

22.6k77 gold badges3333 silver badges5050 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! Moved my pipe variables into the function that waits for an onload
  
  – James
  Mar 25 at 21:06
  

  
  
  
  

add a comment | 

Javascript does things asynchronously, including loading images. If you set the src in code it doesn’t load the image immediately. Therefore pipeTop.height is zero when you set constant. You need to set it later when everything has loaded.

share|improve this answer

answered Mar 25 at 21:01

Sami KuhmonenSami Kuhmonen

22.6k77 gold badges3333 silver badges5050 bronze badges

share|improve this answer

answered Mar 25 at 21:01

Sami KuhmonenSami Kuhmonen

22.6k77 gold badges3333 silver badges5050 bronze badges

answered Mar 25 at 21:01

Sami KuhmonenSami Kuhmonen

22.6k77 gold badges3333 silver badges5050 bronze badges

answered Mar 25 at 21:01

Sami KuhmonenSami Kuhmonen

22.6k77 gold badges3333 silver badges5050 bronze badges