Рисование холста в элементе HTML не отображается

Question

У меня есть расширение Chrome, которое я написал некоторое время назад. Одной из функций было то, что он рисовал фон HTML-элемента, используя document.getCSSCanvasContext. Но, очевидно, Google отказался от этой функции, поэтому мой метод рисования больше не работает. К сожалению, прошло много времени с тех пор, как я написал его, чтобы увидеть, как правильно заменить его. Пока что я это сделал.

HTML выглядит так:

    <div id="idStrgUsg">
        <canvas id="idSmplCvs" width="453" height="1"></canvas>
        <div id="idStrgUsgBar"></div>
    </div>

, а затем JS:

    var perc = 75;

    //Get width of the fill bar
    var objFill = $("#idStrgUsgBar");
    var objParFill = objFill.parent();
    var w = objParFill.outerWidth();
    var h = objParFill.outerHeight();

    var w_f = w * perc / 100;

    var cnvs = document.getElementById("idSmplCvs");
    cnvs.width = w;
    cnvs.height = h;

    var ctx = cnvs.getContext('2d');
    ctx.clearRect(0, 0, w, h);
    ctx.globalAlpha = 0.5;

    ctx.fillStyle = "rgb(193,139,96)";

    ctx.fillRect(0, 0, w_f, h);

    objFill.text(perc.toFixed(1) + "%");

Но это ничего не наполняет:

Так чего мне там не хватает?

Answer 1

Похоже, вам нужно определить высоту и ширину родительского элемента.Запишите значение h и w и посмотрите, что вы получаете.Возможно, обратитесь https://jsfiddle.net/o4smqpLr/

<div id="idStrgUsg" style="width:100px; height: 10px">
        <canvas id="idSmplCvs" width="453" height="10"></canvas>
        <div id="idStrgUsgBar"></div>
    </div>

var perc = 75;

    //Get width of the fill bar
    var objFill = document.getElementById("idStrgUsgBar");
    var objParFill = objFill.parentElement;
    console.log(objParFill.style);
    var w = parseInt(objParFill.style.width);
    var h = parseInt(objParFill.style.height);
        console.log(w);
    console.log(h);
    var w_f = w * perc / 100;

    var cnvs = document.getElementById("idSmplCvs");
    cnvs.width = w;
    cnvs.height = h;

    var ctx = cnvs.getContext('2d');
    ctx.clearRect(0, 0, w, h);
    ctx.globalAlpha = 0.5;

    ctx.fillStyle = "rgb(193,139,96)";

    ctx.fillRect(0, 0, w_f, h);
        //ctx.stroke();
    objFill.innerHTML = perc.toFixed(1) + "%";