Canvas element not showing up

Question

I'm very new to programming and am trying to make a project for class using html, canvas, and a css file. The concept is that there should be a title screen that appears in the canvas element that once you click will disappear and reveal a room where there are elements that you can hover your mouse over and get information.

I have the html, canvas, and css up to how I want it but whenever I try to put something in the canvas element it doesn't show up. Like, for the title screen I want to draw a colored box and put some text in it and then have it click away to reveal an image underneath. I used a drawCanvas but it will only show up if I put a gameLoop at the end. But when I try to add text, it disappears. Again, I'm really new to this and I'm sorry for my wall of text but any advice or suggestions would be really helpful. Here's my html:

 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <title>Title Page</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <script src="js/modernizr.js"></script>

    <script>

        window.addEventListener("load",eventWindowLoaded, false);
        function eventWindowLoaded() {
            canvasApp();    
        }
        function canvasSupport() {
            return Modernizr.canvas;    
        }
        function canvasApp() {
            if (!canvasSupport()) {
                return; 
            } 
            var theCanvas = document.getElementById("canvasOne");
            var context = theCanvas.getContext("2d");


            var width=1000;
            var height=450;


            function drawCanvas(){
                context.fillStyle="teal";
                context.fillRect(0,0,width,height);
                setColor();
                drawLines();
            }

            function gameLoop(){
                requestAnimationFrame(gameLoop);
                drawCanvas();
            }
            gameLoop();
        }


    </script>
     </head>

<body>
    <audio loop="loop" autoplay="autoplay" controls="controls">
        <source src="themesong.mp3" type="audio/mpeg">
        Your browser does not support the audio content.
        </audio>

            <!-- Canvas -->
            <div id="canvas-container">
            <canvas id="canvasOne" width="1000" height="450">
                Your browser does not support canvas.
            </canvas>    
            </div>
            <!-- ^ End Canvas -->

    </body>
 </html>

And here's my CSS:

#canvasOne {
    background-color: #cccccc;
    border: 10px solid rgba(136, 128, 172, 0.9);    
    margin-left: 210px;
    margin-right: auto;
    margin-top: 130px;

#body {
    background-image: url("mansion.jpg");
    background-repeat: no-repeat;
    }

Honestly, if someone could just help me put an image in the canvas and make it so that certain areas where the mouse hovers over a text box would appear, would be awesome. The idea is that it's a game where you "look" around the room with your mouse for clues. And once again, I'm very new to this so sorry if this is formatted weird or my question is too ridiculously long.

mike510a · Answer 1 · 2014-12-15T06:10:03.733

This is your main problem:

  window.addEventListener("load",eventWindowLoaded, false);

The reason I say that is because you are calling the evenWindowLoaded function once -- when the page initially loads. Since this is the case, whatever state the drawLines() and other functions are in when the page loads for the first time, that will be draw on the canvas.

Instead you should try to use this:

var timer = setInterval(function() { eventWindowLoaded(); }, 100);

and then clear the canvas and re-draw it. (this is for the hover effect)

that way, you can do calculate if the mouse's cursor is above a particular space on the canvas and then do whatever functions if it is... this isn't 100% going to work, but its a general idea of what you could do:

    var mousePos;
    var timer = setInterval(function() { eventWindowLoaded(); }, 100);
    function eventWindowLoaded() {
        context.clearRect(0,0,width,height);
        for (var i=0; i<images.count; ++i) {
           var img = images[i];
           if (Math.Abs(mousePos.x - img.Pos().x)) <= img.width) {
                  if (Math.Abs(mousePos.y - img.Pos().y)) <= img.height) {
                       do_hover_event();
                 }
            }
       }
    }


 function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

  canvas.addEventListener('mousemove', function(evt) {
        mousePos = getMousePos(canvas, evt);

}

Thats one thing -- here's another:

You are leaving the scope of the variable definition for the canvas/context var's, try this method for the canvas/context -- using 3 diffeerent separate functions and defining the width, height, theCanvas, and context all in the global scope

   var width=1000;
  var height=450;

  var theCanvas = document.getElementById("canvasOne");
  var context = theCanvas.getContext("2d");

 function canvasApp() {
            if (!canvasSupport()) {
                return; 
            } 


     gameLoop();

}

function drawCanvas(){
                context.fillStyle="teal";
                context.fillRect(0,0,width,height);
                setColor();
                drawLines();
 }

 function gameLoop(){
                requestAnimationFrame(gameLoop);
                drawCanvas();
 }

score 0 · Answer 2 · edited May 23 '17 at 12:05

I'm not sure what exactly you want but i fixed the problem where the image is not coming up on the canvas.

The problem is that on your CSS you are coloring the background then you are also putting the image on it causing it to overlap.

Here is the CSS code that I have changed:

#canvasOne {
    background-image: url("mansion.jpg");
    background-repeat: no-repeat;

    border: 10px solid rgba(136, 128, 172, 0.9);    
    margin-left: 210px;
    margin-right: auto;
    margin-top: 130px;
    }

I dont know how to do the hover part but you should look into this

Canvas element not showing up

2 Answers2