шаблон фона текста с холстом

Question

Как я могу взять значение с кнопки и вставить в холст, чтобы заполнить, например, если я нажму кнопку T, то в поле, где холст заполнит шаблон буквой T всего поля, у меня есть пример, но я не хочучтобы скопировать код, я хочу понять, как это было сделано, потому что я хочу сделать что-то более продвинутое, но сначала мне нужно понять это, вот пример ссылки функции .

Answer 1

Для этого я использую 3 холста.Два полотна скрыты, но вам не нужно прикреплять их к DOM.Логика такова:

1. У вас есть первый холст (canvas1), где вы рисуете текст из <textarea>
2. Вы создаете шаблон, используя canvas1: ctx2.fillStyle = ctx2.createPattern(canvas1,"repeat-x"); и вы используете его для заполнения второго холста canvas2.Этот второй холст в два раза шире основного canvas.
3. Вы используете canvas2 в качестве фонового изображения для основного canvas Здесь вы можете использовать цикл.Я не сделал.

let fontSize = 50;
const canvas = document.querySelector("canvas");
const canvas1 = document.createElement("canvas");
const canvas2 = document.createElement("canvas");

test.appendChild(canvas1);// you don't need to attach this to the DOM
test.appendChild(canvas2);// you don't need to attach this to the DOM
canvas.width = 500;
canvas.height = fontSize * 4;
canvas1.height = fontSize;
canvas2.height = fontSize;
canvas2.width = 2*canvas.width;
let ctx = canvas.getContext("2d");
let ctx1 = canvas1.getContext("2d");
let ctx2 = canvas2.getContext("2d");

ctx1.font = fontSize+"px 'Lucida Console', monospace";

        
theText.addEventListener("input",()=>{
  ctx2.clearRect(0,0, canvas2.width, canvas2.height);
  ctx.clearRect(0,0, canvas.width, canvas.height);
  let _text = theText.value.toUpperCase();

  let textLength = ctx1.measureText(_text).width;
  canvas1.width = textLength || 1;// to avoid width 0 of the canvas
  ctx1.font = fontSize+"px 'Lucida Console', monospace";
  ctx1.fillStyle = "blue";
  ctx1.textBaseline="middle"; 
  ctx1.fillText(_text, 0, canvas1.height/2);
  
  ctx2.fillStyle = ctx2.createPattern(canvas1,"repeat-x");
  
  ctx2.fillRect(0,0, canvas2.width, canvas2.height);
  
  ctx.drawImage( canvas2, 0, 0 );
  ctx.drawImage( canvas2, -canvas2.width/2, fontSize );
  ctx.drawImage( canvas2, canvas2.width/2, fontSize );
  ctx.drawImage( canvas2, 0, 2*fontSize );
  ctx.drawImage( canvas2, -canvas2.width/2, 3*fontSize );
  ctx.drawImage( canvas2, canvas2.width/2, 3*fontSize );
})

canvas{border:1px solid;}
#test{display:none}

<canvas></canvas>
<textarea id="theText"></textarea>
<div id="test"></div>

Чтобы лучше понять, что происходит, удалите #test{display:none} из css.Надеюсь, это поможет.