Предварительный просмотр фона и цвета холста HTML5

Question

Как изменить цвет фона и текста в режиме предварительного просмотра для холста HTML5?

Код, который я привел на [JSFiddle][1], изменяет цвет фона и текста только после закрытия цветовой палитры. Мне также нужны переменные font-family и font-size для текста на холсте. Я нигде не мог найти решения.

Если код не может быть запущен, пожалуйста, решите проблему, создав html-файл.

Пожалуйста, посмотрите это [изображение][2] для получения дополнительной информации.

Любые предложения и помощь будут оценены.

[1]: https://jsfiddle.net/p0z1vau3/
[2]: https://stackru.com/images/887a79d7ba1b555d6b3f911f5ba5debb4609dc35.png

Answer 1

В вашем коде измените eventListener на:

color.addEventListener("input", render);
bgcolor.addEventListener("input", render);

Вы можете прочитать больше о палитре цветов здесь:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Если это решит вашу проблему, отметьте ответ как принятый. Благодарность:)

Answer 2

Если вам нужно, как закодировать изменение размера шрифта и семейства шрифтов, используйте приведенный ниже код. он также включает ответ на оба вопроса. замените свой код javascript этим.

    const color = document.getElementById("color");
    const canvas = document.getElementById("canvas");
  const style = document.getElementById("font-family");
  const size = document.getElementById("font-size");
    const ctx = canvas.getContext("2d");

    // onload
    window.onload = () => {
    render();
};

    // Eventlistner
    color.addEventListener("input", render);
    bgcolor.addEventListener("input", render);
  style.addEventListener("change", render);
  size.addEventListener("change", render);

    // text positions
    function render() {
    drawBackground();
    drawText("top", canvas.height - 48,size.value,style.value);
    drawText("bottom", canvas.height - 18);
 
}
    // Need live preview for background color
    function drawBackground() {
    ctx.fillStyle = bgcolor.value;
    ctx.fillRect(0, canvas.height - 80, canvas.width + 10, 150);
    ctx.restore();
}
    
    function drawText(text, position, fontSize, fontStyle) {
    ctx.fillStyle = "#ffffff";
    ctx.font = fontSize+"px "+ fontStyle; // Need variable font-family & size

    // Need live preview for color
    var top = [{ 
    text: `      Text`, font: `lighter ${ctx.font}`, fillStyle: color.value}];

    var bottom = [{
    text: `......Text`,
    font: `lighter ${ctx.font}`,
    fillStyle: color.value }];

    fillMixedText(ctx, text === "top" ? top : bottom, 20, position);//text positioning
}
    // fillStyle
    function fillMixedText(ctx, args, x, y) {
    let defaultFillStyle = ctx.fillStyle;
    let defaultFont = ctx.font;

    args.forEach(({ text, fillStyle, font }) => {
    ctx.fillStyle = fillStyle || defaultFillStyle;
    ctx.font = font || defaultFont;

    ctx.fillText(text, x, y);
    x += ctx.measureText(text).width;
    });
    ctx.restore();
}