Question

I’m working on a very small project in JavaScript just to help me understand the canvas from the bottom up. I’m trying to avoid using frameworks and the like for now, just so I can understand the basic functionality of HTML5 games.

It’s a fairly basic “cursor mover” with a fading tail. That’s it. Just a shape in one color, moving around based on player input, with a fading tail. I suggest you try it out; it’s actually quite pretty.

Anyways, obviously I’d prefer the cursor to be a circle because it looks smoother. However, whenever I do so, the browser pretty much completely locks up on me. It clearly works, at least to a good extent, but it’s slower than a turtle running through frozen peanut butter.

I know I’m not supposed to include just JSFiddle, but it’s kind of a lot of code and the whole thing is running slowly.

The problem is most likely in the draw function:

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   //this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

The lines are labeled by approaches. 1 corresponds to circles, while 2 corresponds to rectangles.

Here’s the whole project: http://jsfiddle.net/w4Rg3/3/

I just find it kind of hard to believe that it’s so incredibly much slower to have circles (after seeing all of the projects that JS can do), and that I might be doing something wrong.

Answer 1

everyone! I found the issue! It has nothing to do with the structure of my game or anything particularly finicky. Just an API issue!

The problem is indeed in the code sample in my question in the first post.

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.beginPath();  /*THIS IS FIXED*/
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
/*1*/   this.context.closePath();  /*THIS IS FIXED*/
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

I made sure to mark the lines that I added with a “THIS IS FIXED” comment. I assume that it was previously just creating a really, really long arc and drawing it over and over, but who knows? Anyways, problem solved, and it looks beautiful.