Html5 canvas

JavaScript
1

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);
2

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:

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.