window.onload=function(){ let canvas = document.getElementById('canvas'); let c = canvas.getContext('2d'); n = 0; setInterval(function() { n++; if(n >= 360){ n = 0; } canvas.height=400 + (50 * Math.sin(n * Math.PI / 180)); canvas.width=400 + (50 * Math.sin(n * Math.PI / 180)); c.beginPath(); c.fillStyle="#ffffffff"; c.moveTo(5, 5); c.rect(5, 5, canvas.width - 10, canvas.height - 10); c.moveTo((canvas.width / 2) + (canvas.width / 3), (canvas.height / 2)); c.ellipse(canvas.width / 2, canvas.height / 2, canvas.width / 3, canvas.height / 3, 0, 0, Math.PI*2); c.fill(); c.stroke(); }, 1000/30); }

window.onload=function(){ let c = new simpleCanvas('canvas'); n = 0; c.draw = function() { n++; if(n >= 360){ n = 0; } c.resize(400 + (50 * Math.sin(n * Math.PI / 180)), 400 + (50 * Math.sin(n * Math.PI / 180))); c.rect(5, 5, c.width - 10, c.height - 10); c.ellipse(c.width / 2, c.height / 2, c.width / 3, c.height / 3); }; }