How can you code a hover-able mosaic in javascript?

  javascript

I am trying to code a mosaic out of a photo I have laid out in photoshop. What I mean by this, is I have taken a pixel art photo, and started to divide it into to "tiles" labeled with x,y,w and h properties so I can make a variable of dictionaries that display all of my tiles. Then with those rectangles I have made an event to display them on the canvas.

However, I used someone’s snippet slightly adjusted and I need to know how to make it so that when you hover over one of these "tiles" instead of it turning back to the original colour, I need it to stay the same colour as it is when hovered.

Secondly, I have about 12 clouds in the pixel art. I was planning to split up the code so that each colour is split up with their respective tiles and just use the same event, however it only loads the bottom one. Can anyone tell me how to use the same event multiple times on a different variable, or tell me how I can do it so that all of my rectangles are in the same variable.

Thanks

var canvas = document.getElementById("pixelArt");
var ctx = canvas.getContext("2d");

var rects = [
    {x: 0, y: 0, w: 90, h: 40, daytime: true},
    {x: 0, y: 40, w: 90, h: 40, daytime: true},
    {x: 90, y: 0, w: 40, h: 60, daytime: true},
    {x: 90, y: 60, w: 40, h: 20, daytime: true},
    {x: 130, y: 0, w: 80, h: 50, daytime: true},
    {x: 130, y: 50, w: 80, h: 30, daytime: true},
    {x: 180, y: 0, w: 30, h: 50, daytime: true},
    {x: 210, y: 0, w: 30, h: 30, daytime: true},
    {x: 210, y: 30, w: 30, h: 50, daytime: true},
    {x: 240, y: 60, w: 30, h: 20, daytime: true},
    {x: 270, y: 60, w: 90, h: 20, daytime: true},
    {x: 240, y: 0, w: 60, h: 60, daytime: true},
    {x: 300, y: 0, w: 50, h: 60, daytime: true},
    {x: 350, y: 0, w: 30, h: 30, daytime: true},
    {x: 350, y: 30, w: 60, h: 30, daytime: true},
    {x: 360, y: 60, w: 30, h: 20, daytime: true},
    {x: 380, y: 0, w: 30, h: 30, daytime: true},
    {x: 390, y: 60, w: 50, h: 20, daytime: true},
    {x: 410, y: 0, w: 40, h: 30, daytime: true},
    {x: 410, y: 30, w: 40, h: 30, daytime: true},
    {x: 440, y: 60, w: 20, h: 20, daytime: true},
    {x: 450, y: 0, w: 50, h: 60, daytime: true},
    {x: 460, y: 60, w: 40, h: 20, daytime: true},
    {x: 500, y: 0, w: 50, h: 40, daytime: true},
    {x: 500, y: 40, w: 50, h: 40, daytime: true},
    {x: 550, y: 0, w: 40, h: 30, daytime: true},
    {x: 550, y: 30, w: 40, h: 50, daytime: true},
    {x: 590, y: 0, w: 50, h: 60, daytime: true},
    {x: 590, y: 60, w: 100, h: 20, daytime: true},
    {x: 640, y: 0, w: 70, h: 60, daytime: true},
    {x: 690, y: 60, w: 40, h: 20, daytime: true},
    {x: 710, y: 0, w: 70, h: 30, daytime: true},
    {x: 710, y: 30, w: 60, h: 30, daytime: true},
    {x: 730, y: 60, w: 40, h: 20, daytime: true},
    {x: 780, y: 0, w: 30, h: 30, daytime: true},
    {x: 770, y: 30, w: 60, h: 50, daytime: true},
    {x: 810, y: 0, w: 70, h: 30, daytime: true},
    {x: 830, y: 30, w: 30, h: 50, daytime: true},
    {x: 860, y: 30, w: 20, h: 20, daytime: true},
    {x: 860, y: 50, w: 80, h: 30, daytime: true},
    {x: 880, y: 0, w: 60, h: 50, daytime: true},
    {x: 940, y: 0, w: 60, h: 30, daytime: true},
    {x: 940, y: 30, w: 60, h: 50, daytime: true}
]

function pointInRect( rectangle , mouseLocation ) {

    var returnValue = true;

    if (mouseLocation.x < rectangle.x) {

        return false 

    }

    if (mouseLocation.x > rectangle.x + rectangle.w){

        return false

    }

    if (mouseLocation.y < rectangle.y) {

        return false 

    }

    if (mouseLocation.y > rectangle.y + rectangle.h){

        return false

    }

    return true

}

canvas.onmousemove = function(e) {

    // important: correct mouse position:
    var rect = this.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, 
        r;

    var mouseLocation = {
        x: x , y: y 
    }
     
    while(r = rects[i++]) {
      // add a single rect to path:
      ctx.beginPath();
      ctx.rect(r.x, r.y, r.w, r.h);    
      
      // check if we hover it, fill red, if not fill it blue
      
      if (pointInRect) {



      }
      
      ctx.fillStyle = pointInRect(r, mouseLocation) ? "#e6c7a8" : "#98c3ee";
      ctx.fill();
    }
  
  };



/*
  var rectsOne= [
    {x: 0, y: 80, w: 40, h: 60, daytime: true},
    {x: 0, y: 140, w: 70, h: 40, daytime: true},
    {x: 0, y: 180, w: 40, h: 60, daytime: true},
    {x: 40, y: 80, w: 70, h: 30, daytime: true},
    {x: 40, y: 110, w: 50, h: 30, daytime: true},
    {x: 70, y: 140, w: 90, h: 40, daytime: true},
    {x: 40, y: 180, w: 50, h: 30, daytime: true},
    {x: 40, y: 210, w: 70, h: 30, daytime: true},
    {x: 90, y: 180, w: 60, h: 30, daytime: true},
    {x: 110, y: 210, w: 40, h: 30, daytime: true},
    {x: 110, y: 80, w: 40, h: 30, daytime: true},
    {x: 90, y: 110, w: 30, h: 30, daytime: true},
    {x: 120, y: 110, w: 30, h: 30, daytime: true},
    {x: 150, y: 80, w: 60, h: 60, daytime: true},
    {x: 160, y: 140, w: 30, h: 40, daytime: true},
    {x: 150, y: 180, w: 40, h: 60, daytime: true},
    {x: 190, y: 140, w: 50, h: 60, daytime: true},
    {x: 210, y: 110, w: 30, h: 30, daytime: true},
    {x: 210, y: 80, w: 50, h: 30, daytime: true},
    {x: 190, y: 200, w: 40, h: 40, daytime: true},
    {x: 230, y: 200, w: 40, h: 40, daytime: true},
    {x: 260, y: 80, w: 30, h: 30, daytime: true},
    {x: 240, y: 110, w: 50, h: 50, daytime: true},
    {x: 240, y: 160, w: 60, h: 40, daytime: true},
    {x: 270, y: 200, w: 60, h: 40, daytime: true},
    {x: 290, y: 80, w: 30, h: 40, daytime: true},
]   


canvas.onmousemove = function(e) {

    // important: correct mouse position:
    var rect = this.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, 
        r;

    var mouseLocation = {
        x: x , y: y 
    }
     
    while(r = rectsOne[i++]) {
      // add a single rect to path:
      ctx.beginPath();
      ctx.rect(r.x, r.y, r.w, r.h);    
      
      // check if we hover it, fill red, if not fill it blue
      
      if (pointInRect) {



      }
      
      ctx.fillStyle = pointInRect(r, mouseLocation) ? "#fbcca7" : "#b4c7ee";
      ctx.fill();
    }
  
  };
*/
@font-face {
    font-family: "arcade classic";
    src: url("fonts/ARCADECLASSIC.TTF");
}

body {
    margin: 0;
    font-family: "arcade classic", Arial, Helvetica, sans-serif;
    background-color: #ebdfc5;
    letter-spacing: 0.6px;
    transition-duration: 0.4s;
    width: 100%;
    height: 100%;
}

.main {
    text-align: center;
    margin: auto;
    margin-top: 100px;
    padding: 15px;
    width: 1100px;
    height: 1350px;
    color: #363024;
    border: 5px dashed #363024;
}

h1 {
    font-size: 50px;
}

button {
    color: #363024;
    background-color: #ebdfc5;
    border: 3px solid #363024;
    margin-top: 10px;
    padding: 10px;
    font-family: "arcade classic";
    font-size: 30px;
    cursor: grab;
    transition-duration: 0.4s;
    box-shadow: #363024;

}

button:hover {
    background-color: #363024;
    color: #ebdfc5;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="main">
        <h1> Welcome !</h1>
        <h3>Please &nbsp enjoy &nbsp these &nbsp Javascript &nbsp graphics</h3>

        <div class="buttons">
            <Button>Day Time</Button>
            <Button>Night Time</Button>
        </div>

        <canvas id="pixelArt" width="1000px" height="1200px"></canvas>
         

    </div>

    <script src="app.js"></script>
</body>

</html>

Source: Ask Javascript Questions

LEAVE A COMMENT