Html5 canvas üzerinde çizim yapılamaz

Question

Hi dpi canvas oluşturdum ve sonra kutu çizmeye çalıştım, ancak bir şeyler ters gitti. Neden tuval üzerine resim yapamıyorum, biri bana yardım edebilir mi?

Hata oluşmadı ve çizim işlevi yürütülüyor ancak sonucum yok

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>

Kutu çizmeli ama yapmıyor, ne yapmayı unuttum?

Buraya bir metin eklendi çünkü soru sormama izin vermek istemiyor çünkü çok fazla kod var, ama artık açıklayacak hiçbir şeyim yok

Şimdiden teşekkür ederim

Answer 1

Berbat ettin ratio. Aynı zamanda bir değişken ve fonksiyondur ...

Fonksiyon adını değiştirdim getRatiove değişken ekledim. Şimdi çalışıyor:

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>