Question 303376 in Html Question posted in
Some basic documentation can be found here.

Html – how to enter text or image into canvas?

I am generating map markers via canvas. And I need to display the name of the point or an image there.
I enter in FillText, but it doesn’t work. The text is not displayed.
I want the text to be written on a blue background or an image to be displayed instead of a blue circle

  const canvas = document.createElement("canvas")
  const radius = 24
  canvas.width = radius * 2
  canvas.height = canvas.width
  const context = canvas.getContext("2d")
  context.beginPath()
  context.arc(radius, radius, radius, -Math.PI, Math.PI / 2)
  context.lineTo(0, radius * 2)
  context.closePath()
  context.clip()
  context.fillStyle = "white"
  context.fillRect(0, 0, canvas.width, canvas.height)
  context.beginPath()
  context.arc(radius, radius, radius * 0.75, 0, Math.PI * 2)
  context.clip()
  context.fillStyle = "blue"
  context.fillRect(0, 0, canvas.width, canvas.height)
  context.beginPath()
  context.fillStyle = "white"
  context.fillText("TEST")
  context.clip()
Tags:

2

Answers


  1. 0

    • You’ll need to add the x and y parameters to fillText()

      context.fillText("TEST", 10, radius + 2)

    • The <canvas /> needs to be added to the DOM

      document.getElementById('content').appendChild(canvas)

    const canvas = document.createElement("canvas")
const radius = 24
canvas.width = radius * 2
canvas.height = canvas.width
const context = canvas.getContext("2d")
context.beginPath()
context.arc(radius, radius, radius, -Math.PI, Math.PI / 2)
context.lineTo(0, radius * 2)
context.closePath()
context.clip()
context.fillStyle = "white"
context.fillRect(0, 0, canvas.width, canvas.height)
context.beginPath()
context.arc(radius, radius, radius * 0.75, 0, Math.PI * 2)
context.clip()
context.fillStyle = "blue"
context.fillRect(0, 0, canvas.width, canvas.height)
context.beginPath()
context.fillStyle = "red"
context.fillText("TEST", 10, radius + 2)
context.clip()

document.getElementById('content').appendChild(canvas)
    <div id='content' />
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map Marker with Text</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="mapCanvas"></canvas>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
           
            var canvas = document.getElementById('mapCanvas');
            var ctx = canvas.getContext('2d');

          
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            
            function drawMapMarker(x, y, text) {
                // Draw blue circle background
                ctx.beginPath();
                ctx.arc(x, y, 20, 0, 2 * Math.PI);
                ctx.fillStyle = 'blue';
                ctx.fill();
                ctx.closePath();

                ctx.font = '12px Arial';
                ctx.fillStyle = 'white';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(text, x, y);
            }

           
            drawMapMarker(100, 100, 'Marker 1');
        });
    </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search