Pong 2 – Drawing and new positions

Graphics and the first functionality was the goal.  So the first task is to colour the back ground and add a canvas.  Whilst this is pure HTML, using the <canvas> element its good to get a back ground in place.  The size will be 800 pixels by 600 pixels and so the background will be described as

<canvas id=”gameCanvas” width=”800″ height=”600″></canvas>

The real JavaScript that I’m interested in is that on loading the web page and sending a message to the developer console with the simple command console.log(“Hello”);  In order that this is seen first use window.onload = function {} and define the console.log within the {}.  This says that the when the web page is loading up in the browser the first thing I will see in the Developer Console window is Hell.  This will only be seen after the window has finished loading.  So this is a great debugging tool that says if the window loads properly we should see Hello in the console log if it is not seen then the window has not successfully loaded.  Although we should see it for ourselves.  But nice to have a back up.

After this return to the canvas element that was created, draw the background and fill it in.  This is represented as.

<script>
var canvas;
var canvasContext;
window.onload = function(){
console.log(“Hello!”);
canvas = document.getElementById(‘gameCanvas’);
canvasContext = canvas.getContext(‘2d’);
canvasContext.fillStyle = ‘black’;
canvasContext.fillRect(0, 0, canvas.width, canvas.height);

}

</script>

So what is happening?  Well the code is telling us that we are declaring two global, yes global variables called canvas and canvasContext and then after loading the window and seeing the hello as seen above,  the canvas element is being told to refer to the canvas id set in the HTML called gameCanvas.  Then we are saying that this canvas is a 2 Dimensional canvas and filling the whole of the canvas with the colour black starting at position 0,0 which is the top left hand corner of the canvas.

 

Thats it we have now loaded the back ground and as the Rolling stone once sang “Paint it Black’.  Thank you and see you soon.

 

Leave a Reply

Your email address will not be published. Required fields are marked *