Drawing the Floor tiles with angles using Canvas HTML5

Question

I was developing an application for the Tiles manufacturer and for that I was using the HTML5 Canvas. On selection of the tiles The wall and floor should be feel with selected tiles. For the wall rectangle it was pretty straight forward and I was succeeded with that but when used the same for the floor, It didn't look like a floor tiles. Some transformation / rotate / Angle was missing.

I search through blogs to have a some angle in the floor tiles but failed to find proper solution.

Below is the image that I get from my code and below is the code sample too.

Code:-

<canvas id="canvas1"></canvas>

<script>
        var sources = {
                wallTile: './assets/tile_347.jpg',
                floorTile: './assets/tile_390.jpg',
            };

     function drawPattern(wallimg, floorimg, size, rectY) {
            var canvas = document.getElementById('canvas1');

            canvas.width = 1366;
            canvas.height = 800;

            var tempCanvas = document.createElement("canvas");
            var tCtx = tempCanvas.getContext("2d");

            tempCanvas.width = size;
            tempCanvas.height = size;
            tCtx.drawImage(wallimg, 0, 0, wallimg.width, wallimg.height, 0, 0, size, size);

            var tempFloorCanvas = document.createElement("canvas");
            var tFloorCtx = tempFloorCanvas.getContext("2d");
            tempFloorCanvas.width = size;
            tempFloorCanvas.height = size;
            tFloorCtx.drawImage(floorimg, 0, 0, floorimg.width, floorimg.height, 0, 0, size, size);
            tFloorCtx.fill();
            tFloorCtx.setTransform(1,1,-0.5,1,30,10);
            tFloorCtx.rotate(50);

            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
           //  ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat');
        //    ctx.rotate(0);
            ctx.beginPath();
            ctx.rect(0,rectY,canvas.width, 400);
            ctx.closePath();
            ctx.fill();

            var roomImg = new Image();
            roomImg.src = './assets/room11.png';
            roomImg.onload = function() {
                ctx.drawImage(roomImg, 0, 0, canvas.width, canvas.height);
                ctx.restore();
            }

            ctx.fillStyle = ctx.createPattern(tempFloorCanvas, 'repeat');
            ctx.beginPath();

            ctx.rect(0,400,canvas.width, 400);
            ctx.closePath();
            ctx.fill();

            ctx.restore();


        }

        var img = new Image();
        img.src = './assets/wallTile.jpg';
        img.onload = function(){
            var wallimg = this;
            var floorimg = new Image();
            floorimg.src = './assets/floorTile.jpg';
            floorimg.onload = function(){
                drawPattern(wallimg, this, 100, 0);
            }
        }


    </script>

If there is another solution to implement the feature or If there are third party plugins which can transform my canvas to some angle to be look like a floor of the room, then please let me know.

I am new to canvas and html5.

Possible duplicate of [How to do perspective view with html5 canvas](https://stackoverflow.com/questions/14305104/how-to-do-perspective-view-with-html5-canvas) — tif, Aug 26 '18 at 12:10
Thanks tif for the info, but I follow that thread, I didn't get the one which I am looking for. I want to add some angle / rotate / transform of the floor tiles that looks like a floor of the room. Can you have some different idea on that ? — Prashant Kankhara, Aug 27 '18 at 14:44

score 0 · Answer 1 · answered Aug 28 '18 at 08:00

Well, as the name implies, the 2D context is intended to do 2D stuff and doesn't offer any 3D functionality out of the box - affine transforms cannot be used to transform anything in 3D space.

Although it's fully possible to implement 3D functions manually, you would probably be better off looking into WebGL which does give you all 3D functionality that you would need in this case.

If you're not familiar with the concepts of WebGL, you could look into three.js which does all the nitty gritty stuff for you (setting up shaders etc.) and provide an easy to use API. It also provides a 2D renderer in case your app is run on a browser/computer without WebGL/GPU support. You do need to familiarize yourself with basic 3D concepts though.

If you don't have the content as objects you can combine rendering a floor as an object (flat rectangle which you can produce inside three.js), and insert the remaining graphics as sprites on top (with obvious limitations that the room is in a fixed view, i.e. not being able to rotate/move around the room wo/ looking weird).

As to 2D context and 3D perspective: have a look at one of my older answers as well as this one. Just note that these examples are not meant for production use.

Drawing the Floor tiles with angles using Canvas HTML5

1 Answers1