HTML Canvas Image Not Showing Up?

Question

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 should show up, but nothing else.

Here's the .js code for the logo I'm trying to add to the site:

  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();

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):

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="newstyle.css">
</head>

<title>Prototype Contact Page</title>

<body>

<div class="wrapper">

<canvas id="myCanvas" width="200" height="200"></canvas>
<script src="canvas2.js"></script>

<div class="flex-container">
<div class="flex-item item1">

<nav>
<ul style="list-style-type:none">

   <li><a href="--">Home</a></li>

   <li><a href="--">About Me</a></li>

   <li><a href="--">Contact</a></li> 

 </ul>
 </nav>
 </div>

<div class="flex-item item2">

<h3>Contact Me!</h3><hr><br>

 What's Your Name?<br>
<input type="text" name="flname" placeholder="First Name, Last Name">
 <br>

Email<br>
<input type="email" name="email" placeholder="youremail@site.com">
<br>

 Reason for Contacting<br>
<input type="text" name="contactreason" placeholder="Reason for contacting me"><br>

 Your Message<br>
 <textarea name="message" rows="10" cols="20">Your message...</textarea><br><br>

<input type="submit" value="Submit"> |  <input type="reset">

 </form>
</div>

 <div class="flex-item item3">

<h4>New Site Updates!
<hr>
Portfolio Samples Added [10.14.2016]<br><br>
Links Added [10.14.2016]</h4>
</div>

</div>

 </html>

Answer 1

Put pound signs in front of your color codes like such:

grd.addColorStop(0.5,"#33c3e3");
grd.addColorStop(0,"#a7eaf9");
grd.addColorStop(1,"#00cccc");

HTML Canvas Image Not Showing Up?

Question

1 answers

solution1
0 2016-12-05 23:44:19

HTML Canvas Image Not Showing Up?

Question

1 answers

solution1 0 2016-12-05 23:44:19

solution1
0 2016-12-05 23:44:19