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>

상자를 그려야하는데 그렇지 않습니다.

코드가 많아서 질문을하고 싶지 않기 때문에 여기에 텍스트를 추가했지만 더 이상 설명 할 것이 없습니다.

미리 감사드립니다

Answer 1

당신은 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>