Home/ Questions/Q 8728407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T08:38:01+00:00

What elements are using: BACKGROUND IMAGE + IMAGE(shape) + TEXT in canvas Problem: Not

  • 0

What elements are using: BACKGROUND IMAGE + IMAGE(shape) + TEXT in canvas

Problem: Not showing text above a image of background in canvas.

What I expected: Show a text above of image with background image of color.

What I have: If removed image makeShape() function it will show text. Notice: image function have a background color.

This is a HTML form code:

<!doctype html>
<html lang="en">
    <head>
        <title>Canvas text above picture</title>    
        <meta charset="utf-8">
        <style>
            canvas {
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
<form>
<p>
<label for="backgroundColor">Text font:</label>
<select id="backgroundColor">
<option value="white" selected="selected">White</option>
<option value="black">Black</option>
</select>
</p>
<p>
<label for="txt">Text font:</label>
<textarea id="txt" cols="40" rows="3"></textarea>
</p>

<p>
<input type="button" id="previewButton" value="Preview">
</p>
</form>
        <canvas id="myCanvas" width="600" height="500"></canvas>
        <script src="canvasshirt.js"></script>

    </body>
</html>

A canvasshirt.js code:

window.onload = function() {
    var button = document.getElementById("previewButton");
    button.onclick = previewHandler;
}

function previewHandler() {

    var ca = document.getElementById("myCanvas");
    var co = ca.getContext("2d");

    var bgcolor = document.getElementById("backgroundColor");
    var index = bgcolor.selectedIndex;
    var fgColor = bgcolor[index].value;

    var text = document.getElementById("txt").value;

    drawText(co, text); // ! - this should show text above of drawBckg() function

    drawBckg(ca, co, 600, 500, fgColor); // this draw a background of picture below of text
}


function drawBckg(ca, co, w, h, color)
{
    makeShape(co);

    co.fillStyle = color;
    co.fillRect(0, 0, w, h);
}

function makeShape(co)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {
        co.drawImage(shapeimg, 170, 10, 233, 350);
    }
}

function drawText(co, text)
{
    co.font = " 13px Arial";
    //co.font = "bold 1em sans-serif";
    co.textAlign = "left";
    co.fillText(text, 20, 40);
}

FIXATION TRY…

When is changing of function sorting of source code it will result below: 

drawBckg(ca, co, 600, 500, fgColor);
drawText(co, text);

Image of example (text is below of image):

Blue text is below of <code>makeShape()</code> picture with turned off background

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    drawBckg(ca, co, 600, 500, bgcolor, function(){
    drawText(co, text, fgColor);
});

    …

    function drawBckg(ca, co, w, h, color, callback)
{
    makeShape(co, callback);

    co.fillStyle = color;
    co.fillRect(0, 0, w, h);
    callback();  // draw the text here as a fallback if the image doesn't load
}

function makeShape(co, callback)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {
        co.drawImage(shapeimg, 170, 10, 233, 350);
        callback();  // draw the text after drawing the image.
    }
}
    • 0