CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
kaleb
kaleb

Reputation: 47

Command fillRect() in Javascript does not work

I'm currently undergoing the development of a game, but I've stumbled across a problem where the fillRect() command will not work onto the HTML5 canvas, using Javascript. I do not know why this is happening, after trying to do research on it and checking my code. The HTML code is shown below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Cube Quest</title>
        <style>
            #game {
                border: 1px dashed black;
            }
        </style>
    </head>
    <body>
        <canvas id="game" width='1280' height='720'>Your browser does not support the canvas element in HTML5.</canvas>
        <script>
            var clicked = false; // Mouse handling event
            var mouseX = event.cilentX; // Mouse X coordinate
            var mouseY = event.cilentY; // Mouse Y coordinate
            var canvas = document.getElementById("game"); // For canvas
            var ctx = canvas.getContext("2d"); // For canvas
            
            ctx.fillStyle = 'black'; // rectangle color selection
            ctx.fillRect(10, 10, 150, 80);
        </script>
    </body>
</html>

I'm not the best expert on Javascript, so there is little that I know which could help me understand the reason why no rectangle shows when the code is correct.

I appreciate the help on this specific question in advance. :)

Upvotes: 4

Views: 509

Answers (3)

Nikola Lukic
Nikola Lukic

Reputation: 4226

You will need to look addEventListener function in JS to made better view of situation. Here working example : 

// globals
        var canvas = document.getElementById("game");
        var clicked = false; // Mouse handling event
        var mouseX = 0;
        var mouseY = 0;
 
        // yuor application parameters
        var app = {
            clearCanvas: true,
            title: 'HELLO'
        };
        
        canvas.addEventListener('click' , function (event){
        
            mouseX = event.pageX; // Mouse X coordinate
            mouseY = event.pageY; // Mouse Y coordinate
            
            console.log("Mouse x : " + mouseX + " Mouse y :" + mouseY );
            drawAgain();
        
        });
        
        // Initial draw
        var ctx = canvas.getContext("2d"); // For canvas
        ctx.fillStyle = 'black'; // rectangle color selection
        ctx.fillRect(mouseX, mouseY, 350, 65);
        ctx.font="30px Arial";   
        ctx.fillStyle = 'lime';
        ctx.fillText(app.title + "X:" + mouseX + " Y:" + mouseY , mouseX + 35, mouseY + 40, 250)
        
        // Draw when you need
        function drawAgain () {
            
            if (app.clearCanvas == true){
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
             
            ctx.fillStyle = 'black'; // rectangle color selection
            ctx.fillRect(mouseX, mouseY, 350, 65);
            
            ctx.fillStyle = 'lime';
            ctx.fillText(app.title + " X:" + mouseX + " Y:" + mouseY , mouseX + 35, mouseY + 40, 400)
            
       }
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Cube Quest</title>
        <style>
            #game {
                border: 1px dashed black;
            }
        </style>
    </head>
    <body>
        <canvas id="game" width='1280' height='720'>Your browser does not support the canvas element in HTML5.</canvas>
        <script>
        
        </script>
    </body>
</html>

Suggestion: Also learn to use removeEventListener , lot of web developers have trouble with event conflict situation when they use lot of lib's. For dynamic app flow methodology use removeEventListener before setting a flags.

Upvotes: 2

Daniel Dees
Daniel Dees

Reputation: 304

It's your mouse event listeners that are breaking the program.

Comment them out and it works just fine.

Here is a code snippet I use for small JavaScript games I test out.

//Mouse Events ==================
document.onmousemove = mousePos;
document.onmousedown = function() { mouse.clicked = true; };
document.onmouseup = function() { mouse.clicked = false; };

//MOUSE 
var mouse = {
  x: 0,
  y: 0,

  clicked: false
};

function mousePos (e) {
    mouse.x = e.pageX - canvas.offsetLeft;
    mouse.y = e.pageY - canvas.offsetTop;
}

Upvotes: 0

Honey
Honey

Reputation: 386

Having error in event.cilentX because event is not available at this moment so that is not moving to next lines of code to execute. If you want to play with event you need to attache any event listener like canvas.addEventListener('click' , function (event){//here you will get the event});. I just commented the two line now it working fine to draw rectangle.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Cube Quest</title>
        <style>
            #game {
                border: 1px dashed black;
            }
        </style>
    </head>
    <body>
        <canvas id="game" width='1280' height='720'>Your browser does not support the canvas element in HTML5.</canvas>
        <script>
            var clicked = false; // Mouse handling event
           // var mouseX = event.cilentX; // Mouse X coordinate
           // var mouseY = event.cilentY; // Mouse Y coordinate
            var canvas = document.getElementById("game"); // For canvas
            var ctx = canvas.getContext("2d"); // For canvas
            
            ctx.fillStyle = 'black'; // rectangle color selection
            ctx.fillRect(10, 10, 150, 80);
        </script>
    </body>
</html>

Upvotes: 0

Related Questions