CODEWITHSUNDEEP
javascripthtmlcanvas
shani dahan
shani dahan

Reputation: 37

JavaScript - Make canvas text white

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

Answers (1)

Ray Toal
Ray Toal

Reputation: 88488

You should call

ctx.fillText(...)

instead of

ctx.strokeText(...)

Also you will need

ctx.fillStyle = "rgb(255, 255, 255)";

Upvotes: 1

Related Questions