javascript - Why is my canvas blank except for in a corner? -
i'm in process of learning javascript playing canvas, i've managed make grid of squares randomly generated color.
i decided make each squares color increase , decrease in intensity result small corner of grid being drawn, , color doesn't change. doing wrong?
online code here , paste bin here.
var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext("2d"); ctx.clearrect(0, 0, canvas.width, canvas.height); function square(x, y) { this.x = x; this.y = y; this.sizex = 10; this.sizey = 10; this.colo = colo; function colo() { var r = math.floor(math.random() * (255 - 1) + 1); var g = math.floor(math.random() * (255 - 1) + 1); var b = math.floor(math.random() * (255 - 1) + 1); var run = true; var rup, gup, bup = true; while (run) { if (rup) { if (r == 255) { rup = false; } else if (r == 0) { rup = true; } r += 1; r.tostring(); } else if (!gup) { r -= 1; r.tostring(); } if (gup) { if (g == 255) { gup = false; } else if (g == 0) { gup = true; } g += 1; g.tostring(); } else if (!gup) { g -= 1; g.tostring(); } if (bup = true) { if (b == 255) { bup = false; } else if (b == 0) { bup = true; } b += 1; b.tostring(); } else if (!gup) { b -= 1; b.tostring(); } ctx.clearrect(0, 0, canvas.width, canvas.height); var col = "rgb(" + r + "," + g + "," + b + ")"; return col; window.onfocus = function () { rup = true; }; window.onblur = function () { isactive = false; }; console.log("ran loop.") } } ctx.fillstyle = colo(); ctx.fillrect(this.x, this.y, this.sizex, this.sizey); } var squares = new array(); var p = 0; (var = 0; < 128; i++) { (var j = 0; j < 72; j++) { p = + j; squares[p] = new square(i * 10, j * 10); } }
your square()
constructor this:
ctx.fillstyle = colo(); ctx.fillrect(this.x, this.y, this.sizex, this.sizey);
... colo()
, among other things, this:
ctx.clearrect(0, 0, canvas.width, canvas.height);
so, clearing entire canvas before painting each rectangle.
Comments
Post a Comment