Javascript Question posted in
A very good W3school tutorial can be found here.

Simple Javascript to make something in range

I am trying to simply move the the cursor so that when it is between 200=x and 300=x the canvas background goes salmon and outside of that range it goes blue.

Here is my full attempt.

<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:10px; background:#CCC; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
function initCanvas(){
    var ctx = document.getElementById('my_canvas').getContext('2d');
    ctx.canvas.addEventListener('mousemove', function(event){
        var mouseX = event.clientX - ctx.canvas.offsetLeft;
        var mouseY = event.clientY - ctx.canvas.offsetTop;
        var status = document.getElementById('status');
        status.innerHTML = mouseX+" | "+mouseY;
    });
    ctx.canvas.addEventListener('click', function(event){
        var mouseX = event.clientX - ctx.canvas.offsetLeft;
        var mouseY = event.clientY - ctx.canvas.offsetTop;
        // alert(mouseX+" | "+mouseY);
        ctx.fillStyle = "orange";
        ctx.fillRect(mouseX-15, mouseY-15, 30, 30);
    });
}
window.addEventListener('load', function(event) {
    initCanvas();
});
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="300">
    <script>
    const ctx = my_canvas.getContext("2d");
    ctx.fillStyle = "salmon";
        // Create a Canvas:
        //const canvas = document.getElementById("myCanvas");
        // Define a new path
        ctx.beginPath();
        // Set a start-point
        ctx.moveTo(200,150);
        // Set an end-point
        ctx.lineTo(200, 500);
        // The other vertical line
        ctx.moveTo(300, 150);
        ctx.lineTo(300, 500);
        ctx.stroke();
        if ((mouseX > 200 && mouseX < 300)) {
            ctx.fillStyle = "blue";
        }
        ctx.stroke();
        </script>
</canvas>
<h2 id="status">0 | 0</h2>
</body>  
</html

Any help would be greatly appreciated.

Thanks,

Shane

Tags:

2

Answers


  1. 0

    You could add a check and set the color by condition.

    function initCanvas() {
    const ctx = document.getElementById('my_canvas').getContext('2d');
    ctx.canvas.addEventListener('mousemove', function(event) {
        const
            mouseX = event.clientX - ctx.canvas.offsetLeft,
            mouseY = event.clientY - ctx.canvas.offsetTop,
            status = document.getElementById('status');

        status.innerHTML = mouseX + " | " + mouseY;
    });
    ctx.canvas.addEventListener('click', function(event) {
        const
            mouseX = event.clientX - ctx.canvas.offsetLeft,
            mouseY = event.clientY - ctx.canvas.offsetTop;
        
        ctx.fillStyle = mouseX >= 200 && mouseX <= 300
            ? 'orange'
            : 'blue';

        ctx.fillRect(mouseX - 15, mouseY - 15, 30, 30);
    });
}

const ctx = my_canvas.getContext("2d");
ctx.fillStyle = "salmon";
ctx.beginPath();
ctx.moveTo(200, 150);
ctx.lineTo(200, 500);
ctx.moveTo(300, 150);
ctx.lineTo(300, 500);
ctx.stroke();

window.addEventListener('load', initCanvas);
    body { margin: 10px; background: #CCC; }
#my_canvas { background: #FFF; border: #000 1px solid; }
    <canvas id="my_canvas" width="500" height="300">
</canvas>
<h2 id="status">0 | 0</h2>
    Login or Signup to reply.
  2. 0

    The big problem you’re running into is that mouseX is not defined in your script tag. Generally speaking also, script tags should be nested within either head or body. I’ve updated your logic to fit all of your js within a script tag within the body:

    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Canvas Background Change</title>
        <style>
            body {
                margin: 10px;
                background: #CCC;
            }

            #my_canvas {
                display: block;
                margin: 0 auto;
                border: 1px solid #000;
            }
        </style>
    </head>

    <body id="my_body">
        <canvas id="my_canvas" width="500" height="300">
        </canvas>
        <script>
            function initCanvas() {
                const canvas = document.getElementById('my_canvas');
                const ctx = canvas.getContext('2d');

                // Initialize the canvas background to blue
                ctx.fillStyle = "blue";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Mouse move event listener
                canvas.addEventListener('mousemove', function (event) {
                    const mouseX = event.clientX - canvas.offsetLeft;

                    // Check if the mouse is within the specified range
                    if (mouseX >= 200 && mouseX <= 300) {
                        ctx.fillStyle = "salmon";
                    } else {
                        ctx.fillStyle = "blue";
                    }

                    // Redraw the entire canvas with the updated background color
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                });
            }

            window.addEventListener('load', initCanvas);
        </script>
    </body>

</html>

    I wasn’t quite sure what you meant with your condition with the colors: If you want the area that isn’t your defined canvas to turn blue, you can style your body element to have the blue background

    document.getElementById("my_body").style.backgroundColor = "blue"

    If you only wanted the 200-300 range of your canvas to be salmon while the rest is blue, you could just draw a salmon colored rectangle over the blue canvas with this revised mousemove listener

    const mouseX = event.clientX - canvas.offsetLeft;

// Clear the entire canvas before re-drawing (to remove the salmon color)
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the blue background
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw the salmon region when mouseX is within 200-300
if (mouseX >= 200 && mouseX <= 300) {
    ctx.fillStyle = "salmon";
    ctx.fillRect(200, 0, 100, canvas.height);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search