CODEWITHSUNDEEP
javascripthtml
Guy Keogh
Guy Keogh

Reputation: 549

Javascript - image displaying over text

The code runs with no bugs, but a problem I am having is because the ".onLoad" function makes it display after the text has already been displayed on the screen. The problem I am facing is that I would like if the text (Loading graphics and loading variables) displayed over the image.

The code is here:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html>
<body>
<canvas id="ctx" width="800" height="500" style="border:1px solid #d3d3d3;"></canvas>

<script>
var ctx = document.getElementById("ctx").getContext("2d");

var canvas = document.getElementById('ctx');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function(){
    context.drawImage(imageObj,0,0);
};
imageObj.src = 'img/startscreen.jpg';

ctx.fillText('Loading variables.',50,50);
character=new Object();
character.hp=1;
character.name=null;
ctx.fillText('Loading graphics..',50,100);
</script>

</body>
</html>

Upvotes: 1

Views: 146

Answers (3)

Guy Keogh
Guy Keogh

Reputation: 549

I called the function for the text to be displayed after the background has:

imageObj.src = 'img/startscreen.jpg';
imageObj.onload = function(){
 context.drawImage(imageObj,0,0);
 init()
};

function init(){
 ctx.fillText('Loading variables.',50,50);
 character=new Object();
 character.hp=1;
 character.name=null;

 ctx.fillText('Loading graphics..',50,100);
}

Upvotes: 0

BlackPOP
BlackPOP

Reputation: 5747

If you want to overlay String on image, why don you use image as backGround imange and place text over it??

Css
try in css

#ctx{
background-image:url('img/startscreen.jpg');}

remove image source in script or insert css in script itself

Css in scripts

ctx.style.backgroundImage=url('img/startscreen.jpg');

Upvotes: 1

rlemon
rlemon

Reputation: 17667

I would layer the background image on its own canvas positioned behind the text layer. Then you can clear and update the text layer without having to re-draw the background image. 

#background,#overlay {
    position: absolute;
}

<canvas id="background"></canvas>
<canvas id="overlay"></canvas>

var can = document.getElementById('overlay'),
    bg_can = document.getElementById('background'),
    height = can.height = bg_can.height = 500,
    width = can.width = bg_can.width = 500,
    ctx = can.getContext('2d'),
    bctx = bg_can.getContext('2d');

var img = new Image();
img.src = ' ... ';
img.onload = init;

function init() {
  // draw the background
  bctx.drawImage(this, 0, 0);
  // draw your initial text
  updateText('hello world');
  // other stuff that is going to take time
  updateText('done');
}

function updateText(msg) {
  ctx.clearRect(0, 0, width, height);
  ctx.fillText(msg, 50, 100);
}

This isn't very well thought out (my code example) for re-use purposes.. but I don't know much about your other needs :) hope this helps.

Upvotes: 1

Related Questions