Html5/JS rotating image and place it on a canvas.

[Darius]

As a little side project, I'm remaking Ceasar III in Html5/JS. I have >600 tile images like this:


But I can't manage to draw them onto the canvas without having white space.
The images themselves are 58x30 pixels.
So the tile itself is a cube sized 32.6pixels.

How could I draw it onto a canvas (rotated)?
I've tried it with rotating the canvas itself ... but the white space between the tiles always is drawn.

[Jackolantern]

Are you wanting an isometric view? If so, perhaps you could look at a_bertrand's game here.

[a_bertrand]

Can you show us the white spaces you say? If you do it well, isometric tiles works perfectly with JS. I would say it's purely an issue on your side, but as you don't give any example, or sources to check I can't help more.

[Jackolantern]

Very true. If you could post the code and pictures, we could help further.

[Darius]

there is a tile in the OP. (the black image)
http://i.imgur.com/Jh5KwDa.png


As for code, pretty straight forward:

Code: Select all

        //this.engine.getContext().rotate(45*Math.PI/180);
        for(var i = 0; i < this.engine.mapData.length; i++){
            for(var y = 0; y < this.engine.mapData[i].length; y++){
                var img = this.engine.loadImage("images/" + this.engine.mapData[i][y].sprite);
                this.engine.getContext().drawImage(img, i*32.6, y*32.6);
            }
        }

        //this.engine.getContext().rotate(-45*Math.PI/180);

the load image:

Code: Select all

    this.loadImage = function (name)    {
        var image = new Image();
        image.src = name;
        return image;
    }

[a_bertrand]

Your code would draw in a grid like while for ISO maps you need to have odd and even lines on different X positions. Therefore each 2 rows add an offset which should be 16 pixels for you.

[Jackolantern]

Have you checked out Bertrand's excellent JS isometric tutorial? You could look on the 2nd page and he has the current progress uploaded, so you can see if it would help you.

[Darius]

Oh great thanks.
To bad there is no reputation or "thanks"/"like" button, else I'd give you both some rep++ .

[Jackolantern]

Thanks hehe I have always liked not having any kind of reputation, though, since it becomes a popularity contest, and can also be used to shame people.