Question

I have the following JS file, which contains a function I’m using to draw the elements needed for the first level of a browser based game I’m writing using the HTML5 canvas and JavaScript:

* This function draws the elements for level 1. */
        function drawLevelOneElements(){
            /*First, clear the canvas */ 
            context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
            /*This line clears all of the elements that were previously drawn on the canvas. */
            /*Then redraw the game elements */
            drawGameElements(); 

            /*Create the four description areas, and place them near the bottom of the canvas */
            /*Create boxes with rounded corners for the description areas */
            CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
                if(typeof stroke == "undefined" ){
                    stroke = true;
                }
                if(typeof radius === "undefined"){
                    radius = 5;
                }
                this.beginPath();
                this.moveTo(x + radius, y);
                this.lineTo(x + width - radius, y);
                this.quadraticCurveTo(x + width, y, x + width, y + radius);
                this.lineTo(x + width, y + height - radius);
                this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
                this.lineTo(x + radius, y + height);
                this.quadraticCurveTo(x, y + height, x, y + height - radius);
                this.lineTo(x, y + radius);
                this.quadraticCurveTo(x, y, x + radius, y);
                this.closePath();
                if(stroke){
                    context.stroke();
                }
            }

            context.drawDescriptionArea(70, 400, 120, 70);
            context.font = '25pt Calibri';
            context.strokeText('Asset', 90, 440);

            context.drawDescriptionArea(300, 400, 120, 70);
            context.strokeText('Liability', 310, 440);

            context.drawDescriptionArea(540, 400, 120, 70);
            context.strokeText('Income', 550, 440);

            context.drawDescriptionArea(750, 400, 180, 70);
            context.strokeText('Expenditure', 760, 440);

            /*Now draw the images to the canvas */
            /*First, create variables for the x & y coordinates of the image that will be drawn.
                the x & y coordinates should hold random numbers, so that the images will be 
                drawn in random locations on the canvas.*/
                var imageX = Math.floor(Math.random()*100);
                var imageY = Math.floor(Math.random()*100);

            /*Draw all images from assetsImageArray */
            /*Use a while loop to loop through the array, get each item and draw it. */
            var arrayIteration = 0;
            while(arrayIteration < assetsImageArray.length){
                context.drawImage(assetsImageArray[arrayIteration], imageX, imageY, 50, 50);
                arrayIteration+1;
            }

        }

Currently, when I load my webpage in a browser, the canvas is displayed, along with a start button which is on the canvas. When the start button is clicked, the above function is called.

However, for some reason, it takes ages for this function to be performed: when I click the button, the browser doesn’t do anything at all for a few seconds, then it ‘fades out’ as if it’s not responding, and then the task is actually performed, and the elements in the function are drawn to the canvas.

I also get a warning message about an unresponsive script, giving me the options to continue, debug the script, or stop the script. When I choose to stop the script, the function that’s been called is performed, and the elements are all drawn to the canvas.

I’m wondering how I can stop this warning message from displaying, and get the function to draw the elements to canvas much more quickly.

My first thoughts are that it maybe something to do with the while loop at the end of this function, or maybe the array that I’m using to hold the images that will be drawn?

At the moment, the array only holds one image- eventually I want to have three or four separate arrays that will hold a total of about 40 images between them, all of which will be drawn to the canvas using this function, but I don’t think I can start adding more images to this array until I’ve managed to cut the loading speed by a hefty amount.

Does anyone know if what I’m doing is correct? Or if not, how I should go about it?

One thing I’m not sure about is how JavaScript determines its array sizes- are they fixed or dynamic?
How would I print out the size of this array in the console to check?

I haven’t specified an array size because I need it to be dynamic, as the number of images that will need to be loaded to the canvas must be changeable. Can anyone help?

Answer 1

Your problem is that you never increment arrayIteration. “arrayIteration+1” doesn’t modify it.