how to enter text or image into canvas?

Issue

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

Solution

• 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' />

Answered By - 0stone0