Головна‎ > ‎JavaScript‎ > ‎

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

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)