Reputation: 37
I am trying to make an image with HTML5 canvas and javascript. The image has a background image and two lines of stroked text, but, the image background is empty. how can i make it White?
var canvas = document.getElementById("Meme");
var ctx = canvas.getContext("2d");
canvas.width = 550;
canvas.height = 545;
ctx.font = "30px Impact";
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
//ctx.textAlign = 'center';
ctx.fillStyle = "rgb(102, 153, 153)";
var background = new Image();
background.src = "https://imgflip.com/s/meme/Creepy-Condescending-Wonka.jpg";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0,0);
drawText();
}
function drawText() {
ctx.strokeText("Text 1".toUpperCase() ,230,50);
ctx.strokeText("Text 2".toUpperCase() ,230,490);
}
<canvas id="Meme">
Your browser does not support the canvas element.
</canvas>
Upvotes: 0
Views: 639
Reputation: 88488
You should call
ctx.fillText(...)
instead of
ctx.strokeText(...)
Also you will need
ctx.fillStyle = "rgb(255, 255, 255)";
Upvotes: 1