setting background color of a canvas with image and text

Question

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 pen

 function convertImageToCanvas() { var s = '<img src="http://usabilitygeek.com/wp-content/uploads/2012/04/HTML-Guidelines-Usability-SEO-A-Link-Tag.jpg" alt="" id="image-on" />'; var htmlObject = document.createElement('div'); htmlObject.innerHTML = s; var image = htmlObject.firstChild; var c = '<canvas id= "drawing"> </canvas>'; var canvasObject = document.createElement('div'); canvasObject.innerHTML = c; var canvas = canvasObject.firstChild; /*document.createElement("canvas");*/ var text = 'All the world \\'sa 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 < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 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 < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { line = words[n] + ' '; num += 1; } else { line = testLine; } } return num; } 

 canvas { background: #FFFF00; } 

 <div id="total-container"> <div> Open dev tools then Click on the "Click Me" button. then check out the console tab and click on the link for the Image. </div> <div id="image-container"> <img src="http://usabilitygeek.com/wp-content/uploads/2012/04/HTML-Guidelines-Usability-SEO-A-Link-Tag.jpg" alt="" id="image-on" /> </div> <div id="comment-container"> Lorem Ipsum </div> <button onclick="convertImageToCanvas()">Click Me</button> 

Answer 1

You can set the background color of the canvas like this:

canvas{
    background-color: #FFFF00;
}