Question

In my first canvas attempt (a classic slot machine), the performance is terrible. After the first few spins, Chrome nearly crashes.

Is it the use of prototype?

Stack wants me to write a lot more text here to submit, so I will.

var Renderer = function(options) {
    var self = this
    _.extend(self, options)
    self.positions = _.map(self.reels, function(r) { return 0 })
    self.heights = _.map(self.reels, function(r) { return r.length * self.symbolHeight })
    self.context = self.canvas.getContext('2d')

    self.render()
}

Renderer.prototype.render = function() {
    var self = this

    self.context.drawImage(self.bg, 0, 0)

    self.context.rect(0, 0, self.symbolWidth * self.rows, self.symbolHeight * self.reels.length)
    self.context.clip()

    for (var reel = 0; reel < self.reels.length; reel++) {
        for (var row = 0; row <= self.rows; row++) {
            var reelIndex = Math.floor(self.positions[reel] / self.symbolHeight) + row
            , symbolOffset = self.positions[reel] % self.symbolHeight

            if (reelIndex >= self.reels[reel].length) {
                reelIndex -= self.reels[reel].length
            }

            var symbolIndex = self.reels[reel][reelIndex]
            , x = reel * self.symbolWidth
            , y = row * self.symbolHeight - symbolOffset

            /*
            console.log('drawing symbol', symbolIndex, 'from', self.symbolDims[symbolIndex].x,
                self.symbolDims[symbolIndex].y, 'to', x, y)
            */

            self.context.drawImage(
                self.symbols,
                self.symbolDims[symbolIndex].x,
                self.symbolDims[symbolIndex].y,
                self.symbolDims[symbolIndex].width,
                self.symbolDims[symbolIndex].height,
                x,
                y,
                self.symbolWidth,
                self.symbolHeight
            )
        }
    }
}

Renderer.prototype.spinupTick = function() {
    var allReelsAtMaxSpeed = true
    , maxReelSpeed = 20
    , self = this
    , acc = 1
    , reel

    for (reel = 0; reel < this.reels.length; reel++) {
        if (!self.reelsMoving[reel]) continue

        if (self.speeds[reel] < maxReelSpeed) {
            if (Math.random() < 0.5) {
                self.speeds[reel] += acc
            }

            allReelsAtMaxSpeed = false
        }

        self.positions[reel] -= self.speeds[reel]

        if (self.positions[reel] < 0) {
            self.positions[reel] += self.heights[reel]
        }
    }

    if (allReelsAtMaxSpeed) {
        var allReelsStopped = true

        for (reel = 0; reel < self.reels.length; reel++) {
            if (!self.reelsMoving[reel]) continue

            var stopSpot = self.stops[reel] * self.symbolHeight

            console.log('stop spot', stopSpot, 'position', self.positions[reel])

            if (stopSpot - self.positions[reel] <= self.speeds[reel]) {
                self.reelsMoving[reel] = false
                self.positions[reel] = stopSpot
            } else {
                allReelsStopped = false
            }
        }

        if (allReelsStopped) {
            clearInterval(self.timer)
            self.timer = null
        }
    }

    self.render()
}

Renderer.prototype.spin = function() {
    var self = this
    self.speeds = _.map(self.reels, function() { return 0 })
    self.reelsMoving = _.map(self.reels, function() { return true })
    self.stops = [0, 1, 2]
    self.timer = setInterval(_.bind(self.spinupTick, self), 1000 / 60)
}

http://jsfiddle.net/abrkn/yNtEE/7/

Answer 1

I forgot to call context.beginPath() before the clipping