title: setting background color of a canvas with image and text
body: <p>I want to create one canvas element where I want to put an image and some text under the image. This thing is working fine. Now I want to set the background color of the canvas as 'yellow' and text color as 'black'. The text color I can set but I could not able to set the background color of the canvas element. Here is my <a href="http://codepen.io/Soumen/pen/KdLmQM" rel="nofollow">pen</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function convertImageToCanvas() {
      var s = '&lt;img src="http://usabilitygeek.com/wp-content/uploads/2012/04/HTML-Guidelines-Usability-SEO-A-Link-Tag.jpg" alt="" id="image-on" /&gt;';
      var htmlObject = document.createElement('div');
      htmlObject.innerHTML = s;
  
      var image = htmlObject.firstChild;
      var c = '&lt;canvas id= "drawing"&gt; &lt;/canvas&gt;';
      var canvasObject = document.createElement('div');
      canvasObject.innerHTML = c;
  
      var canvas = canvasObject.firstChild; /*document.createElement("canvas");*/
      var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';
      var lineHeight = 25;
      var maxWidth = image.naturalWidth;
      var context = canvas.getContext("2d");
      var lines = getLines(context, text, maxWidth);
  
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight + lineHeight + (lines * lineHeight);
      canvas.style.background = "#FFFF00";
      context.font = '16pt Calibri';
      context.fillStyle = '#FFFF00';
      //context.fill();
      //var context = canvas.getContext("2d");
      context.drawImage(image, 0, 0);
  
      var y = image.naturalHeight + lineHeight;
      var x = 0;
      wrapText(context, text, x, y, maxWidth, lineHeight);
      /*context.fillText("Here will be the comment", x, y);*/
  
      var image = new Image();
      image.src = canvas.toDataURL("image/png");
      image.setAttribute('crossOrigin', 'anonymous');
      console.log("the source of the image will be " + image.src);
      /*var imageUrl = canvas.toDataURL();
      console.log("the image url is as followes"+imageUrl);*/
  
      return canvas;
  }
  
  
  function wrapText(context, text, x, y, maxWidth, lineHeight) {
      var words = text.split(' ');
      var line = '';
  
      for (var n = 0; n &lt; words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if (testWidth &gt; maxWidth &amp;&amp; n &gt; 0) {
              context.fillText(line, x, y);
              line = words[n] + ' ';
              y += lineHeight;
          }
          else {
              line = testLine;
          }
      }
      context.fillText(line, x, y);
      //context.strokeText(line, x, y);
  }
  
  function getLines(context, text, maxWidth) {
      var words = text.split(' ');
      var line = '';
      var num = 1;
  
      for (var n = 0; n &lt; words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if (testWidth &gt; maxWidth &amp;&amp; n &gt; 0) {
              line = words[n] + ' ';
              num += 1;
          } else {
              line = testLine;
          }
  
      }
      return num;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
      background: #FFFF00;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="total-container"&gt;
      &lt;div&gt;
          Open dev tools then Click on the "Click Me" button. then check out the console tab and click on the link for the Image. 
      &lt;/div&gt;
      &lt;div id="image-container"&gt;
          &lt;img src="http://usabilitygeek.com/wp-content/uploads/2012/04/HTML-Guidelines-Usability-SEO-A-Link-Tag.jpg" alt="" id="image-on" /&gt;
      &lt;/div&gt;
      &lt;div id="comment-container"&gt;
          Lorem Ipsum
      &lt;/div&gt;
      &lt;button onclick="convertImageToCanvas()"&gt;Click Me&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>