Home>

I took the code from here. I'm not the author. I want to improve the performance of this canvas. As I understand it, the more canvas, the more load on the PC. I apologize if something is wrong, I am a beginner developer. So here I found a solution. I made a canvas with a fixed position, width and height exactly equal to the browser window. I noticed that the smaller the canvas size, the less the load. But for some reason the canvas does not work when the scroll goes below the height of the browser window (that is, the height of the canvas). This cursor works correctly only when the canvas height is equal to the height of the entire page, but why doesn't it work correctly with position: fixed; and a height equal to the height of the browser window. In the code, I showed those fields that I changed, the rest of the code is similar to what the author did. The question is: Why does canvas break when scrolling further than the height of the browser window? I set position: fixed;

var canvas= document.getElementById("canvas");
var context= canvas.getContext("2d");
var width= window.innerWidth; //Вот тут
var height= window.innerHeight; //Вот тут
var points= [];
var t= 0;
var radius= 50;
var period= 1000;
var color= "rgba(239, 91, 59, 0.5)";
var blur= 50;
canvas.style.width= canvas.width= width;
canvas.style.height= canvas.height= height;
context.fillStyle= color;
var filter= context.filter= "blur(" + blur + "px)";
var dr= radius /period;
function draw() {
  context.clearRect(0, 0, document.body.offsetWidth, document.body.offsetHeight); //Вот тут
  let i= 0;
  let deleted= 0;
  let dt= -t + (t= window.performance.now());
  context.beginPath();
  while (i++ < points.length-1) {
    let p= points[i];
    let r= radius -(p[2] += dt) * dr;
    context.moveTo(p[0], p[1]);
    if (p[2] <= period) context.arc(p[0], p[1], r, 0, 2*Math.PI, true);
    else deleted= i;
  }
    context.fill();
    points.splice(0, deleted);
    window.requestAnimationFrame(draw);
}
window.onmousemove= function(event) {
    points.push([event.pageX, event.pageY, 0]);
}
t= window.performance.now();
window.requestAnimationFrame(draw);
body{
  height: 500vh;
  margin: 0;
  padding:0;
  background: black;
}

 <canvas id="canvas" style="position: fixed; left: 0; top: 0; z-index: 1;">Не поддерживается</canvas> <!--Тут изменил на position: fixed; -->
  • Answer # 1

    Mouse Event PropertypageX, pageYtakes scrolling into account. Because your canvas is always in place, then you need to take the coordinates relative to the windowevent.x, event.y

    var canvas= document.getElementById ("canvas");
    var context= canvas.getContext ("2d");
    var width= window.innerWidth; //Right here
    var height= window.innerHeight; //Right here
    var points= [];
    var t= 0;
    var radius= 50;
    var period= 1000;
    var color= "rgba (239, 91, 59, 0.5)";
    var blur= 50;
    canvas.style.width= canvas.width= width;
    canvas.style.height= canvas.height= height;
    context.fillStyle= color;
    var filter= context.filter= "blur (" + blur + "px)";
    var dr= radius /period;
    function draw () {
      context.clearRect (0, 0, document.body.offsetWidth, document.body.offsetHeight); //Right here
      let i= 0;
      let deleted= 0;
      let dt= -t + (t= window.performance.now ());
      context.beginPath ();
      while (i ++ &lt;
     points.length-1) {
        let p= points [i];
        let r= radius -(p [2] += dt) * dr;
        context.moveTo (p [0], p [1]);
        if (p [2] &lt;
    = period) context.arc (p [0], p [1], r, 0, 2 * Math.PI, true);
        else deleted= i;
      }
        context.fill ();
        points.splice (0, deleted);
        window.requestAnimationFrame (draw);
    }
    window.onmousemove= function (event) {
        points.push ([event.x, event.y, 0]);
    }
    t= window.performance.now ();
    window.requestAnimationFrame (draw); 
    body {
      height: 500vh;
      margin: 0;
      padding: 0;
      background: black;
    } 
    
     &lt;
    canvas id= "canvas" style= "position: fixed; left: 0; top: 0; z-index: 1;" &gt;
    Not supported &lt;
    /canvas &gt;
     &lt;
    ! -Here changed to position: fixed; -&gt;
    

    Nice solution (+), but not scalable. When opened in full screen, only the upper left quandrant works

    Alexandr_TT2022-01-11 12:07:18

    Thank you very much! Thank you very much. As a developer, could you give me some advice on the best place to learn javascript? I just started to study it.

    Бахтияр Умутбаев2022-01-11 12:08:46
  • Answer # 2

    Mouse Event PropertypageX, pageYtakes scrolling into account. Because your canvas is always in place, then you need to take the coordinates relative to the windowevent.x, event.y

    var canvas= document.getElementById ("canvas");
    var context= canvas.getContext ("2d");
    var width= window.innerWidth; //Right here
    var height= window.innerHeight; //Right here
    var points= [];
    var t= 0;
    var radius= 50;
    var period= 1000;
    var color= "rgba (239, 91, 59, 0.5)";
    var blur= 50;
    canvas.style.width= canvas.width= width;
    canvas.style.height= canvas.height= height;
    context.fillStyle= color;
    var filter= context.filter= "blur (" + blur + "px)";
    var dr= radius /period;
    function draw () {
      context.clearRect (0, 0, document.body.offsetWidth, document.body.offsetHeight); //Right here
      let i= 0;
      let deleted= 0;
      let dt= -t + (t= window.performance.now ());
      context.beginPath ();
      while (i ++ &lt;
     points.length-1) {
        let p= points [i];
        let r= radius -(p [2] += dt) * dr;
        context.moveTo (p [0], p [1]);
        if (p [2] &lt;
    = period) context.arc (p [0], p [1], r, 0, 2 * Math.PI, true);
        else deleted= i;
      }
        context.fill ();
        points.splice (0, deleted);
        window.requestAnimationFrame (draw);
    }
    window.onmousemove= function (event) {
        points.push ([event.x, event.y, 0]);
    }
    t= window.performance.now ();
    window.requestAnimationFrame (draw); 
    body {
      height: 500vh;
      margin: 0;
      padding: 0;
      background: black;
    } 
    
     &lt;
    canvas id= "canvas" style= "position: fixed; left: 0; top: 0; z-index: 1;" &gt;
    Not supported &lt;
    /canvas &gt;
     &lt;
    ! -Here changed to position: fixed; -&gt;
    

    Nice solution (+), but not scalable. When opened in full screen, only the upper left quandrant works

    Alexandr_TT2022-01-11 12:07:18

    Thank you very much! Thank you very much. As a developer, could you give me some advice on the best place to learn javascript? I just started to study it.

    Бахтияр Умутбаев2022-01-11 12:08:46