Cannot draw on html5 canvas

Question

I created Hi dpi canvas and then tried to draw box, but something went wrong. Why I cannot draw on canvas, could anyone help me?

No errors occured & draw function is executing but I have no result

 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>

It should draw box but it does not, what I forgot to do?

Added some text here because it do not want to let me ask quesiton because a lot of code, but I have nothing to describe anymore

Thank you in advance

Answer 1

You've messed up with ratio . It is a variable and function at the same time...

I change function name to getRatio and added variable. Now works:

 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>