skip to Main Content

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

2

Answers


    • 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.
  1. <!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