1

Javascript is very far from being one of my strengths; therefore apologies if my question appears very remedial to many of you.

I am attempting to implement Boids through Javascript and the HTML5 Canvas. Although the flocking behaviour has been established, the application looks rather plain upon a blank background.

For this reason, I am attempting to use an image as my background, but am having difficulties.

this.draw = function() {
        /* First clear everything */
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

        /* And ink them */
        this.context.strokeStyle = "#000";
        this.context.stroke();

        /* Draw each boid */
        for(var i in this.boids) {
            this.boids[i].draw(this.context, this.size);
        }
    }

If anyone has knowledge of how to paint a background image within the above function, please can you let me know :)

Mered Williams
  • 95
  • 1
  • 6
  • Could you please show us some of the surrounding code? What object is "this"? – Bergi Apr 27 '12 at 12:39
  • "this" relates to the Arena object which controls the presentation. It is called from within the HTML with: var canvasElement = document.getElementById("boids"); arena = new Arena(canvasElement, 8, 8); – Mered Williams Apr 27 '12 at 12:42

1 Answers1

3

Instead of doing it in Canvas, you can more easily set a background-image in the CSS:

http://jsfiddle.net/qwzBh/

That way you won't have to worry about drawing it all the time.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171