title: HTML Canvas Image Not Showing Up?
body: <p>I coded a logo separately using HTML canvas. Now, I want to add it to the code of the site prototype I have. Problem is, whenever I try to add the code to the site, it never shows up. It leaves a big gaping space where the image <em>should</em> show up, but nothing else.</p>
  
  <p>Here's the .js code for the logo I'm trying to add to the site: </p>
  
  <pre><code>  var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
  
    context.shadowColor = "black";
    context.shadowOffsetX = 5; 
    context.shadowOffsetY = 5; 
    context.shadowBlur = 6;
  
    context.beginPath();
    context.arc(150, 96, 50, 0, Math.PI, false);
    context.closePath();
    var grd=context.createRadialGradient(90,100,3,90,40,100);
    grd.addColorStop(0.5,"33c3e3");
    grd.addColorStop(0,"a7eaf9");
    grd.addColorStop(1,"00cccc");
  
    context.fillStyle = grd;
    context.fill();
  
    context.font = "15px Georgia";
    context.fillStyle = "#003366";
    context.textAlign = "center";
    context.fillText("Design This Site", canvas.width/2, canvas.height/3.5); 
  
  
    context.beginPath();
    context.arc(150, 60, 50, 0, Math.PI, true);
    context.closePath();
  
    context.fillStyle = '#33c3e3';
    context.fill();
  </code></pre>
  
  <p>And here is the code of my site where it won't show up. (I've included the non-working .js under the "wrapper" class where I originally placed it when testing): </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="newstyle.css"&gt;
  &lt;/head&gt;
  
  &lt;title&gt;Prototype Contact Page&lt;/title&gt;
  
  &lt;body&gt;
  
  &lt;div class="wrapper"&gt;
  
  &lt;canvas id="myCanvas" width="200" height="200"&gt;&lt;/canvas&gt;
  &lt;script src="canvas2.js"&gt;&lt;/script&gt;
  
  &lt;div class="flex-container"&gt;
  &lt;div class="flex-item item1"&gt;
  
  &lt;nav&gt;
  &lt;ul style="list-style-type:none"&gt;
  
     &lt;li&gt;&lt;a href="--"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
     &lt;li&gt;&lt;a href="--"&gt;About Me&lt;/a&gt;&lt;/li&gt;
  
     &lt;li&gt;&lt;a href="--"&gt;Contact&lt;/a&gt;&lt;/li&gt; 
  
   &lt;/ul&gt;
   &lt;/nav&gt;
   &lt;/div&gt;
  
  &lt;div class="flex-item item2"&gt;
  
  &lt;h3&gt;Contact Me!&lt;/h3&gt;&lt;hr&gt;&lt;br&gt;
  
   What's Your Name?&lt;br&gt;
  &lt;input type="text" name="flname" placeholder="First Name, Last Name"&gt;
   &lt;br&gt;
  
  Email&lt;br&gt;
  &lt;input type="email" name="email" placeholder="youremail@site.com"&gt;
  &lt;br&gt;
  
   Reason for Contacting&lt;br&gt;
  &lt;input type="text" name="contactreason" placeholder="Reason for contacting me"&gt;&lt;br&gt;
  
   Your Message&lt;br&gt;
   &lt;textarea name="message" rows="10" cols="20"&gt;Your message...&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;input type="submit" value="Submit"&gt; |  &lt;input type="reset"&gt;
  
   &lt;/form&gt;
  &lt;/div&gt;
  
   &lt;div class="flex-item item3"&gt;
  
  &lt;h4&gt;New Site Updates!
  &lt;hr&gt;
  Portfolio Samples Added [10.14.2016]&lt;br&gt;&lt;br&gt;
  Links Added [10.14.2016]&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
   &lt;/html&gt;
  </code></pre>