CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
jcooke.mn
jcooke.mn

Reputation: 21

Text over background (Canvas/JS)

I'm trying to place text over a background color. I think the issue is that the "fillStyle" is being applied to both the text and the background. I want the text to be black. What am I doing wrong here?

Below is my code:

var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;

var ctx = canvas.getContext("2d");
ctx.fillText("hello", 0, 0);
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);

var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
document.body.appendChild(img);

Here's a link to the fiddle: https://jsfiddle.net/jessecookedesign/9rsy9gjn/36/

Upvotes: 0

Views: 3301

Answers (4)

Prachi Joshi
Prachi Joshi

Reputation: 375

Whenever you access canvas of html page, whatever you draw first, will display first. so if you want to display your colored box first fill it first, then write your text by providing color ,font and position of text. for example,

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.fillStyle = "#E7E0CA";//your rect color
ctx.fillRect(0, 0, 200, 200);//your rect size
ctx.fillStyle = "#000000";//color for your text
ctx.font="30px Arial";//font style and size
ctx.fillText("hello world",25,50);//text and location
</script>

Upvotes: 1

Hargo
Hargo

Reputation: 1266

Unlike HTML where you define a list of what you want to appear, when working with a canvas it's like you're painting. So each "drawing" operation you do (like fillRect or fillText) will go on top of any existing content and cover it up.

Similarly since you're actually painting, rather than defining objects, you need to set the fill style before drawing. Using the analogy, you need to select the color of paint you'll use before you put paint to canvas.

Finally, the fillText method takes a position as the start of the baseline of the text. Since (0, 0) is the top left of the canvas, your text will get drawn above the bounds of the canvas an not be visible, so you need to move it down e.g. fillText("Hello World", 10, 100);

Correcting for those issues you get something like the following (and skipping the steps involved in converting to an img tag):

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// Draw a black background
context.fillStyle = "black";
context.fillRect(0, 0, 200, 200);

// Draw the text
context.fillStyle = "#E7E0CA";
context.fillText("Hello world", 10, 100);
<canvas id="canvas" width="200" height="200"></canvas>

Upvotes: 2

Sebastian Simon
Sebastian Simon

Reputation: 19475

There are several issues:

  1. You need to first fill the background, then fill the text.
  2. Your text is above the canvas area — try a lower position.

This code has the correct order, and a position for the text that isn’t outside the canvas bounds.

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = "#000000";
ctx.fillText("hello", 10, 10);

With the changed order, of course you need to choose a new color for the text, in this case "#000000".

Alternatively, you could save and restore your canvas state:

var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);
ctx.restore();
ctx.fillText("hello", 10, 10);

Upvotes: 1

Manuel Otto
Manuel Otto

Reputation: 6540

  1. Wrong order - You're drawing the rectangle over the text.
  2. The text has the same color as the rectangle
  3. There's no font specified
  4. The position (0,0) is out of bounds

Try it like this:

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#E7E0CA";
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText("hello",10,30);

Upvotes: 1

Related Questions