Command fillRect() in Javascript does not work

Question

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. :)

Nikola Lukic · Accepted Answer · 2018-05-27 21:14:42Z

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.

Honey · Accepted Answer · 2018-05-09 06:47:21Z

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>

Daniel Dees · Accepted Answer · 2018-05-10 06:15:49Z

0

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;
}

answered May 10, 2018 at 6:15

Daniel Dees

3044 silver badges14 bronze badges

Collectives™ on Stack Overflow

Command fillRect() in Javascript does not work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related