Html5 canvas

I have start to programming in html5 i found a lot of resource but i have a question.
In my simple script there are two element. One element is animated and the other one is not animated. Can you learn how to not clear the element not animated in the canvas?
Thank’s here my code.

const canvas = document.createElement('canvas');
canvas.width = "1000";
canvas.height = "500";
const ctx = canvas.getContext('2d');

ctx.fillStyle = "orange";
ctx.rect(0,100,canvas.width,50);
ctx.fill();

var i = 0;
function frame(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    i++;
    if(i == canvas.height){i = 0}        
    ctx.font = "100px Arial";
    ctx.fillStyle = "red";
    ctx.fillText("Ciao!",0,i);
};

setInterval(frame,10);

document.body.appendChild(canvas);



Hi @lyro86, I don’t think you can; when applying animations, you’ll have to draw everything anew for each frame:

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let i = 0

canvas.width = '1000'
canvas.height = '500'

function frame () {
  i = (i + 1) % canvas.height

  ctx.clearRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = 'orange'
  ctx.fillRect(0, 100, canvas.width, 50)

  ctx.font = '100px Arial'
  ctx.fillStyle = 'red'
  ctx.fillText('Ciao!', 0, i)
}

setInterval(frame, 10)
document.body.appendChild(canvas)

Also have a look here for more detailed explanations: