Невозможно перевести внутри HTML-холста

Question

У меня есть холст HTML, и я хочу прокручивать текущее содержимое вправо на 1 пиксель каждый раз, когда добавляю новый пиксель слева.По сути, создаем эффект рисования диаграммы

function draw()
{
    ctx.save();
    y += Math.floor((Math.random() * 10) - 5);
    ctx.fillStyle = 'blue';
    ctx.translate(1, 0);
    ctx.restore();
    ctx.fillRect(0,y,3,3);

    window.requestAnimationFrame(draw);
}

// init canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);

var y = 0;
draw();

По какой-то причине я не получаю никакого визуального вывода на холст

Answer 1

Не понятно, что вы пытаетесь сделать с помощью сохранения и восстановления ...
В приведенном ниже коде я удалил их и упростил ваш код, чтобы просто напечатать строку

function draw() {
  y += Math.sin(y*23);
  ctx.fillStyle = 'blue';
  ctx.translate(1, 0);
  ctx.fillRect(0, y++, 3, 3);
  window.requestAnimationFrame(draw);
}

// init canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var y = 0;
draw();

<canvas id="canvas"></canvas>

---

Но вы можете получить тот же эффект без перевода, просто увеличив координаты x:

function draw() {
  y += Math.sin(y*23);
  ctx.fillStyle = 'red';
  ctx.fillRect(x++, y++, 3, 3);
  window.requestAnimationFrame(draw);
}

// init canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var y = 0; x = 0;
draw();

<canvas id="canvas"></canvas>

---

Но если все, что вам нужно, это симпатичная диаграмма, вы должны взглянуть на чарты:
https://www.chartjs.org/samples/latest/