0

I'm trying to fill the background of the first of three Canvas drawings, but can't get anything to show up.

HTML:

<!DOCTYPE html>

<html>

 <head>
  <script src="lab5.js"> </script>
  <title> Lab 5 </title>
 </head>

 <body>
  <h1> Canvas </h1>
  <canvas id="drawingSurface1" width="700" height="500" style="border:1px solid #000000;">
  </canvas>
  <canvas id="drawingSurface2" width="350" height="500" style="border:1px solid #000000;">
  </canvas>
  <canvas id="drawingSurface3" width="350" height="500" style="border:1px solid #000000;">
  </canvas>
 </body>

</html>

Javascript:

// drawing 1

function drawing1() {
 var drawingSurface=document.getElementById("drawingSurface1");
 var ctx = drawingSurface.getContext("2d");

 ctx.fillStyle="#FF0000";
}


// drawing 2

function drawing2() {
 var drawingSurface=document.getElementById("drawingSurface2");
 var ctx = drawingSurface.getContext("2d");
}


// drawing 3

function drawing3() {
 var drawingSurface=document.getElementById("drawingSurface3");
 var ctx = drawingSurface.getContext("2d");
}

I know I'm probably missing something really simple, but my mind's going blank.

taji
  • 1
  • 4
    How - when - where are you calling those functions? Notice also, that all the variables you declare in a function, will be local to that function. – Teemu Feb 20 '18 at 12:00
  • 1
    [Potential duplicate?](https://stackoverflow.com/a/27736313/2071241) – Lucas Feb 20 '18 at 12:01
  • @Teemu I kind of assumed that it would just magically happen through the canvas id, to be honest. Do I need to manually call the function on the HTML document? – taji Feb 20 '18 at 12:16
  • Unfortunately there's no built-in magic in JS, you've somehow to call your functions, otherways they are not executed. Notice also, that the linked dup will help you to fix the problems with the code when you'll manage to execute it. – Teemu Feb 20 '18 at 12:24
  • @Teemu I fixed it after replacing with , although I could have sworn that I already tried that to no avail. Thanks. – taji Feb 20 '18 at 13:26

0 Answers0