CODEWITHSUNDEEP
javascripthtmlcanvas
Christoper Hans
Christoper Hans

Reputation: 635

HTML5: Canvas Context fillText/strokeText does not draw

I am following a tutorial from Dev.Opera about HTML5 Painting application and trying to improve it by adding a text tool that prompts user of what text they wanted to input after clicking on coordinate.

E.g. User clicked on coordinate 100,200 , a prompt will ask what text they wanted to show and after user entered the text, it should draw it on canvas.

I knew my browser support canvas fillText and strokeText function, because when I load this web the text shows.

On the tutorial I follow, Dev.Opera creates a temp canvas on the real canvas so that images (shapes and text) are supposedly drawn to temp canvas and then transferred to real canvas by img_update() method.

// This function draws the #imageTemp canvas on top of #imageView,
// after which #imageTemp is cleared. This function is called each time when the
// user completes a drawing operation.
function img_update () {
  contexto.drawImage(canvas, 0, 0);
  context.clearRect(0, 0, canvas.width, canvas.height);
}

I tried to do fillText on context like this:

context.fillText(textVar, x, y);
img_update();

and this does not draw the text, while:

contexto.fillText(textVar, x, y);

draws it perfectly. I had expand the program to draw circle, polyline, and fills and all of them works perfectly on the context without having to draw them at contexto.

How can I force the text to be drawn at context and then transfer it using img_update()?

Upvotes: 1

Views: 1776

Answers (1)

akonsu
akonsu

Reputation: 29536

maybe fill style is set so that you do not see the text?

Upvotes: 3

Related Questions