0

I am making a breakout game in javascript and I need to have 3 images to be the blocks, however I am having trouble with the image showing up at all. I also have another draw function in my code, and was wondering if this had anything to do with the problem. Below is my javascript code for drawing the image and my init function.

function init() {
    ctx = $('#canvas')[0].getContext("2d");         
    intervalId = setInterval(draw, 10);
}

function draw() {
    clear();
    ctx.fillStyle = "#00A308";
    ctx.fill();
    rect(paddlex, paddley, paddlew, paddleh);           
    if (fireCircle())  {
        circle((paddlex) + (paddlew/2), y, r); 
    }
}


var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
home = new Image();

home.onload = function() {
    context.drawImage(home, 100, 50);
}
home.src = "NavBarHome.png";
D.Khan
  • 143
  • 1
  • 6
  • `updates every ten seconds` - no, your draw function is called 100 times per second - the second parameter to setInterval is the interval in ms ... and without seeing the `draw` function, we can only guess if there is something wrong with it – Jaromanda X Jan 09 '16 at 15:16
  • I added my draw function into the question. – D.Khan Jan 09 '16 at 15:21
  • Not sure why this has been marked as a duplicate of that particular question - the code clearly uses the same method of adding an image as the accepted answer! – Jaromanda X Jan 09 '16 at 15:23
  • What's the first thing done by the draw function? What does `clear()` do? I haven't dealt with canvas much recently ... in this code, would filling the context `ctx` with a colour erase the image drawn using the context `context`? – Jaromanda X Jan 09 '16 at 15:27
  • The 'clear()' clears the entire canvas so that it can be re-drawn. When the 'clear()' is removed, the image shows up but the ball animation for the breakout game is messed up because it does not clear the ball drawing from before anymore. – D.Khan Jan 09 '16 at 15:35
  • I was wondering how I can reconcile the two; having a draw function that updates constantly and wanting to have a static image on the canvas that stays there at all times. – D.Khan Jan 09 '16 at 15:36
  • That's probably a different question, and seeing as this one has been (incorrectly) closed anyway as a duplicate, you wont get much love in this question – Jaromanda X Jan 09 '16 at 15:37
  • Include the drawImage into the loop, or it will be drawn only once then cleared at next loop. And please don't open an other question, do some research first and you could even delete this one as it's unlikely to help any one coming in the future. – Kaiido Jan 10 '16 at 10:04

0 Answers0