ไม่สามารถวาดบนผืนผ้าใบ html5

Question

ฉันสร้างผ้าใบ Hi dpi จากนั้นพยายามวาดกล่อง แต่มีบางอย่างผิดพลาด ทำไมฉันวาดภาพบนผืนผ้าใบไม่ได้มีใครช่วยฉันได้บ้าง

ไม่มีข้อผิดพลาดเกิดขึ้น & ฟังก์ชันวาดกำลังดำเนินการ แต่ฉันไม่มีผลลัพธ์

var HiDPICanvas = function(container_id, color, w, h) {
    /*
    canvas will be placed in the container
    canvas will have width w and height h
    */
    
    var ratio = function() {
        // return pixel ratio
        var ctx = document.createElement("canvas").getContext("2d");
        var dpr = window.devicePixelRatio || 1;
        var bsr = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio || 1;
    
        return dpr / bsr;
    }

    var createHiDPICanvas = function() {
        if (!ratio) { ratio = ratio(); }
        var chart_container = document.getElementById(container_id);
        var can             = document.createElement("canvas");
        can.style.backgroundColor = color
        can.width           = w * ratio;
        can.height          = h * ratio;
        can.style.width     = w + "px";
        can.style.height    = h + "px";
        can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
        chart_container.appendChild(can);
        return can;
    }

    var canvas = createHiDPICanvas()
    return {
        canvas : canvas,
        ctx    : canvas.getContext("2d"),
        width  : w,
        height : h,
        color  : color
    }

}

// cci -> canvas ctx info (dict)
var cci = HiDPICanvas("lifespanChart", "bisque", 780, 640)
var ctx           = cci.ctx
var canvas        = cci.canvas

var Box = function(color) {
    
    var create = function() {
        ctx.save();
        ctx.globalCompositeOperation = "source-over";
        ctx.beginPath();
        ctx.lineWidth = 0.001;
        ctx.fillStyle = color;
        ctx.moveTo(-1, -1);
        ctx.lineTo(50, -1)
        ctx.lineTo(50, 50)
        ctx.lineTo(-1, 50)
        ctx.lineTo(-1, -1)
        console.log("drawing square")
        ctx.stroke();
        ctx.closePath();
        ctx.fill();
        ctx.restore()
    }

    create()
    return {
        refresh : create,
        color   : color
    }
    
}


var borders = Box("red")

<div>
        <div id="lifespanChart"></div>
    </div>

มันควรจะวาดกล่อง แต่มันไม่ได้ฉันลืมทำอะไร?

เพิ่มข้อความบางส่วนที่นี่เพราะไม่ต้องการให้ฉันถาม quesiton เนื่องจากรหัสจำนวนมาก แต่ฉันไม่มีอะไรจะอธิบายอีกต่อไป

ขอบคุณล่วงหน้า

Answer 1

คุณได้ messed ratioขึ้นด้วย มันเป็นตัวแปรและหน้าที่ในเวลาเดียวกัน ...

ฉันเปลี่ยนชื่อฟังก์ชันเป็นgetRatioและเพิ่มตัวแปร ตอนนี้ใช้งานได้:

var HiDPICanvas = function(container_id, color, w, h) {
    /*
    canvas will be placed in the container
    canvas will have width w and height h
    */
    
    var getRatio = function() {
        // return pixel ratio
        var ctx = document.createElement("canvas").getContext("2d");
        var dpr = window.devicePixelRatio || 1;
        var bsr = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio || 1;
    
        return dpr / bsr;
    }

    var createHiDPICanvas = function() {
        let ratio = getRatio();
        var chart_container = document.getElementById(container_id);
        var can             = document.createElement("canvas");
        can.style.backgroundColor = color
        can.width           = w * ratio;
        can.height          = h * ratio;
        can.style.width     = w + "px";
        can.style.height    = h + "px";
        can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
        chart_container.appendChild(can);
        return can;
    }

    var canvas = createHiDPICanvas()
    return {
        canvas : canvas,
        ctx    : canvas.getContext("2d"),
        width  : w,
        height : h,
        color  : color
    }

}

// cci -> canvas ctx info (dict)
var cci = HiDPICanvas("lifespanChart", "bisque", 780, 640)
var ctx           = cci.ctx
var canvas        = cci.canvas

var Box = function(color) {
    
    var create = function() {
        ctx.save();
        ctx.globalCompositeOperation = "source-over";
        ctx.beginPath();
        ctx.lineWidth = 0.001;
        ctx.fillStyle = color;
        ctx.moveTo(-1, -1);
        ctx.lineTo(50, -1)
        ctx.lineTo(50, 50)
        ctx.lineTo(-1, 50)
        ctx.lineTo(-1, -1)
        console.log("drawing square")
        ctx.stroke();
        ctx.closePath();
        ctx.fill();
        ctx.restore()
    }

    create()
    return {
        refresh : create,
        color   : color
    }
    
}


var borders = Box("red")

<div>
        <div id="lifespanChart"></div>
    </div>