Unable to get Canvas on screen via HTML

Question

In my code, I am getting only black canvas of defined width and height. And Red and white is not rendering on screen.

Thanks in advance.

var canvas;
var canvasContext;
var ballx = 50;

window.onload = function() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');
  drawCanvas();
  drawCanvasRed();
  // drawCanvas();
}

function drawCanvas() {
  canvasContext.fillStyle = 'black';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);


  canvasContext.fillStyle = 'white';
  canvasContext.fillRect(225, 200, 50, 25);
};

function drawCanvasRed() {
  canvasContext.fillStyle = 'red';
  canvasContext.fillRect(ballx, 200, 50, 25);
}

#gameCanvas {
  width: 500px;
  height: 500px;
}

<canvas id="gameCanvas"></canvas>

It works, they are just "outside" of the canvas. If you don't define the size of a canvas it uses 300x150px as default size. — Andreas, Dec 13 '19 at 10:49
@cloned Why did you modify OPs code (adding the style definition)? — Andreas, Dec 13 '19 at 10:50
@Andreas The canvas size is defined in css file, as 800x600 px — Mohit Pandey, Dec 13 '19 at 10:52
This does not affect the actual size of the canvas -> https://stackoverflow.com/questions/35219815/html-canvas-difference-between-width-height-attribute-and-width-height-style — Andreas, Dec 13 '19 at 10:55
@Andreas. It is working now when inline styling is given. thanks for explanation. — Mohit Pandey, Dec 13 '19 at 11:03
You might want to add (and accept) your working solution as answer (or delete your question) to complete this question. — Andreas, Dec 13 '19 at 11:07
@Andreas Sorry, just wanted to set some default width/height, I thought since the 220 other drawings were at 250 position, 500 is good to go. but apparently I screwed up here, sorry for that! — cloned, Dec 13 '19 at 11:15

score 3 · Accepted Answer · answered Dec 13 '19 at 11:05

You need to check the size of the canvas. I have changed some sizes. So it's could help you.

<!DOCTYPE html>
<html>
   <head></head>
   <style>
      #gameCanvas {
      width: 1000px;
      height: 1000px;
      }
   </style>
   <body>
      <canvas id="gameCanvas"></canvas>
      <script>
         var canvas;
         var canvasContext;
         var ballx = 50;

         window.onload = function() {
           canvas = document.getElementById('gameCanvas');
           canvasContext = canvas.getContext('2d');
           drawCanvas();
           drawCanvasRed();
           // drawCanvas();
         }

         function drawCanvas() {
           canvasContext.fillStyle = 'black';
           canvasContext.fillRect(0, 0, 500, 500); // In your size you need to check, because you passed canvas width and canvas height

           canvasContext.fillStyle = 'white';
           canvasContext.fillRect(10, 10, 50, 25);
         };

         function drawCanvasRed() {

           canvasContext.fillStyle = 'red';
           canvasContext.fillRect(ballx, 50, 50, 25);
         }
      </script>
   </body>
</html>

Unable to get Canvas on screen via HTML

1 Answers1