Ad

How To Fill Canvas Rects With Image

- 1 answer

I created a canvas for example with 4 cells , how can i set an image to each cell ? my Canvas rotated and i don't want to my images rotate too , also when mouse move on cells, images gone!

my code :

<html>
<head>
<script src="jquery-3.4.1.js"></script>
</head>
<body bgcolor="black">
<canvas id="tutorial" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    rects = [
        {x: 0, y: 0, w: 100, h: 100},
        {x: 0, y: 100, w: 100, h: 100},
        {x: 100, y: 100, w: 100, h: 100},
        {x: 100, y: 0, w: 100, h: 100}
    ], i = 0, r;
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.scale(0.71, 0.3834);
    ctx.rotate(-0.25 * Math.PI);
// render initial rects.
while(r = rects[i++]) ctx.rect(r.x, r.y, r.w, r.h);
// var img = new Image();
// img.onload = function () {
    // ctx.drawImage(img, 0, 0);
// }
// img.src = "i1.png";
ctx.fillStyle = "#c5de89"; 
ctx.fill();
canvas.onmousemove = function(e) {
  var rect = this.getBoundingClientRect(),
      x = e.clientX - rect.left,
      y = e.clientY - rect.top,
      i = 0, r;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  while(r = rects[i++]) {
    ctx.beginPath();
    ctx.rect(r.x, r.y, r.w, r.h);    
    ctx.fillStyle = ctx.isPointInPath(x, y) ?  "red" : "#c5de89";
    ctx.fill();
  }

};
</script>
</body>
</html>

I want somthing like this :

enter image description here

My Canvas :

enter image description here

Ad

Answer

You should add image x and y cordinate inside the onmousemove function too since you are rebuilding the canvas in that function.

var angle = 0;
var canvas = document.getElementById("tutorial"),
  ctx = canvas.getContext("2d"),
  rects = [{
      x: 0,
      y: 0,
      w: 100,
      h: 100
    },
    {
      x: 0,
      y: 100,
      w: 100,
      h: 100
    },
    {
      x: 100,
      y: 100,
      w: 100,
      h: 100
    },
    {
      x: 100,
      y: 0,
      w: 100,
      h: 100
    }
  ],
  i = 0,
  r;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.scale(0.71, 0.3834);
ctx.rotate(-0.25 * Math.PI);
// render initial rects.




while (r = rects[i++]) {
  ctx.rect(r.x, r.y, r.w, r.h);
  ctx.fillStyle = "#c5de89";
  ctx.fill();
  ctx.save();
  ctx.rotate(0.25 * Math.PI);

  base_image = new Image();
  base_image.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
  ctx.drawImage(base_image, r.x, r.y - 75);
  ctx.restore()
}



canvas.onmousemove = function(e) {
  var rect = this.getBoundingClientRect(),
    x = e.clientX - rect.left,
    y = e.clientY - rect.top,
    i = 0,
    r;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  while (r = rects[i++]) {
    ctx.beginPath();
    ctx.rect(r.x, r.y, r.w, r.h);
    ctx.fillStyle = ctx.isPointInPath(x, y) ? "red" : "#c5de89";
    ctx.fill();
    ctx.save();
    ctx.rotate(0.25 * Math.PI);

    base_image = new Image();
    base_image.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
    ctx.drawImage(base_image, r.x, r.y - 100);
    ctx.restore()
  }


};
<html>

<head>
  <script src="jquery-3.4.1.js"></script>
</head>

<body bgcolor="black">
  <canvas id="tutorial" width="500" height="500"></canvas>
</body>

</html>

Ad
source: stackoverflow.com
Ad