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);

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()?


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

Need Your Help

Algorithm in C to calculate coefficients of polynomial using Lagrange interpolation

c algorithm math computer-science polynomial-math

I've been stuck on this for a while now. I'm writing an algorithm in C to pull out the coefficients of a polynomial using Lagrange's interpolation method.