Estoy aprendiendo JavaScript e intenté hacer una función simple, pero aparece este error al intentar ejecutar:
TypeError: drCtx es nulo
html:
<body onload="init()"> <div style="min-width: 400px; display: inline-block;"></div> <canvas id="test" width="1000" height="800"></canvas> </body>js:
var width, height; var drCtx; var charsize =15; var chars = ["0","1"] var charArray; var c,r; //Initialze canvas function init(){ var canvasElement = document.getElementById("test"); drCtx = canvasElement.getContext("2D"); width = canvasElement.width; height = canvasElement.height; c = parseInt(Math.ceil(width / charsize)); r = parseInt(Math.ceil(height / charsize)); charArray = new Array(c); for(var i=0; i<c;i++) { charArray[i] = new Array(r); for(var j =0; j<r;j++) { var rIndex = parseInt(randomIntFromInterval(0, chars.length-1)); charArray[i][j] = chars[rIndex]; } } console.log(charArray); renderDR(); } function renderDR(){ drCtx.fillStyle = "#000000"; drCtx.beginPath(); drCtx.fillRect(0,0,width,height); drCtx.fill(); drCtx.fillStyle = "#FFFFFF" for(var i=0; i<c;i++) { for(var j =0; j<r;j++) { var x = i*charsize; var y = j*charsize; drCtx.fillText(charArray[i][j],x,y); } } } function randomIntFromInterval(min, max) { // min and max included return Math.floor(Math.random() * (max - min + 1) + min) }Mi función init() no tiene este problema y no tiene retorno. No sé qué salió mal, ¡cualquier ayuda es apreciada!
Cambia esta línea:
.getContext("2D")A:
.getContext("2d")