Графічне поле

var canvas = document.createElement("canvas")

var ctx = canvas.getContext("2d")

canvas.width = 512

canvas.height = 480

document.body.appendChild(canvas)

// Текст

ctx.font = '30px Cursive'

ctx.fillText('Я на на полотні', 50, 50)

// Червоний прямокутник

ctx.fillStyle = 'red';

ctx.fillRect(0, 0, 100, 100);

Не на canvas

// Текст в контейнері svg

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")

svg.width = 500

svg.height = 50

var text = document.createElementNS("http://www.w3.org/2000/svg", "text")

text.setAttribute('x', '0')

text.setAttribute('y', '50')

text.style.fontFamily = 'Times New Roman'

text.style.fontSize = '50'

text.textContent = 'Текст в контейнері'

svg.appendChild(text)

document.body.appendChild(svg)