Canvas and Scripting

[Reizvoller]

Greetings!

I am having an issue that I can't seem to be able to figure out. I would really appreciate an extra pair of eyes to validate my work so far.

All this is, so far, is just a bunch of shapes on an HTML page. It is to be a very simple game ( just exploring Javascript through making this ) but right now I am just building the framework/elements.

The script is this 

expandcollapse popup

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #canvas-container {
   width: 100%;
   text-align:center;
}

canvas {
   display: inline;
}
    </style>
    

  </head>
  <body onload="startUp()">

  <div id="canvas-container">
    <canvas id="game" width="300" height="500"></canvas>
  </div>
 
<script>
    
    var canvas = document.getElementById('game');
    var ctx = canvas.getContext('2d');
    
    var x = canvas.width;
    var y = canvas.height;
    var scoreVal = 0;
    var itemXRand = Math.floor(Math.random() * x) + 1
    
    ctx.stroke();
    
    function cloud(){
    
    ctx.beginPath();
      ctx.moveTo(170, 30);
      ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
      ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
      ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
      ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
      ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
      ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.fillStyle = '#8ED6FF';
      ctx.fill();
      ctx.strokeStyle = '#0000ff';
      ctx.stroke();
    
    }

    function workArea(){
      ctx.beginPath();
      ctx.rect(0, 0, x, y);
      ctx.fillStyle = "#2ab9ff";
      ctx.fill();
      ctx.stroke = 1;
}

    function topRect(){
      ctx.beginPath();
      ctx.rect(0, 0, x, 30);
      ctx.fillStyle = "#D3D3D3";
      ctx.fill();
      ctx.stroke = 1;
}

    function scoreKeep(){   
    ctx.font = "15px Arial";
    ctx.fillStyle = "#000000";
    ctx.fillText("Score "+scoreVal,5, 25);  
    }

    function bttmRect(){
      ctx.beginPath();
      ctx.rect(0, y-30, x, 30);
      ctx.fillStyle = '#5bc928';
      ctx.fill();
      ctx.stroke = 1;
}


    function monstRect(){
      ctx.beginPath();
      ctx.rect(0, y-80, x, 30);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.stroke = 1;
}

    function itemCirc(){
    var centerX = itemXRand
    var radius = 15;
    var positionY = 45;
    
      ctx.beginPath();
      ctx.arc(centerX, positionY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = randomColor();
      ctx.fill();
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#003300';
      ctx.stroke();
}

    function startUp(){
    workArea();
    topRect();
    bttmRect();
    scoreKeep();
    itemCirc();
    monstRect();
    cloud();
    }
    
    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
}
    
</script>

  </body>
</html>

The issue is that cloud() and monstRect() will not show up when the page loads. If I comment out workArea(), topRect(), and bttmRect() in the function "startUp()" then monstRect() and cloud() show up. I've re-read those little snippets of code for those three areas that I comment out and I can't see where I have gone wrong.

Any advice or if you can spot my mistake I would really appreciate it.

Thank you!

-Reiz

[guinness]

1. Bad use of ASI (automatic semi-colon insertion)
2. Polluting the global scope (use an IIFE or ES2015 module)
3. I am not really seeing your issue, though I do see errors when I move your code to http://jsbin.com/wededadera/edit?html,js,console,output. Check the console and you will see what I mean.

[Reizvoller]

Greetings!

Your reply is amazingly helpful and friendly.

I actually ended up scrapping the entire thing and went to work in Python for fun

I will review my old ( this one ) code and apply the information you provided.

Thank you for your time and assistance!