Tilemap optimization

Benchmark created on

Preparation HTML

<div id="testDiv" style="position:relative">
<canvas id="canvas1" width="912" height="720"></canvas>
<canvas id="canvas2" width="912" height="720" style="position:absolute;left:0px;top:0px"></canvas>
<div>
<script src="https://gameofbombs.com/demos/rpgmaker/Project1/perf1.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
draw from canvas
Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    dw = dw || sw;
    dh = dh || sh;
    if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&
            sx + sw <= source.width && sy + sh <= source.height) {
        this._context.globalCompositeOperation = 'source-over';
        this._context.drawImage(source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);
        this._setDirty();
    }
};

drawTilemap();
ready
draw from image
Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    dw = dw || sw;
    dh = dh || sh;
    if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&
            sx + sw <= source.width && sy + sh <= source.height) {
        this._context.globalCompositeOperation = 'source-over';
        this._context.drawImage(source._image || source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);
        this._setDirty();
    }
};

drawTilemap();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.