Gifedit, a tool for making animated GIF images

Help For initialisation: init({width: 120, height: 90}); To draw, the context object is ctx. You can use all html5 canvas library. To clear the image: clear(); To a frame to the animation: addFrame({delay: 1000});

Input: JavaScript code describing your animation init({width: 120, height: 90}); ctx.font = "30px Arial"; let y1 = 30; let y2 = 90; let ymoy = (y1 + y2)/2 let yrange = y2 - ymoy; function drawFrame(t) { clear(); if(t==1) ctx.fillStyle = "green"; else ctx.fillStyle = "black"; ctx.fillText("+3", 35, y1+t*yrange); ctx.fillText("2+", 20, y2-t*yrange); if(t == 1) { ctx.fillText("2", 20, y1+t*yrange); ctx.fillText("3", 53, y2-t*yrange); } else { ctx.fillStyle = "CornflowerBlue"; ctx.fillText("x", 20, y1+t*yrange); ctx.fillText("y", 53, y2-t*yrange); } } drawFrame(0); addFrame({delay: 1000}); for(let t = 0; t < 1; t+=0.1) { drawFrame(t); addFrame({delay: 50}); } // or a canvas element drawFrame(1); addFrame({delay: 1000});

Output: Animated GIF Generate GIF