Wobbling Ball With Canvas
copy // same as yesterday but with canvas instead of svg const canvas = document.createElement ( 'canvas' ) , c = canvas.getContext ( '2d' ) ; document.body .appendChild ( canvas) ; document.body .style .margin = 0 ; let w = window.innerWidth , h = window.innerHeight , x = w / 2 , y = h / 2 , vx = vy = dx = dy = 0 , damp = 0.99 , div = 8 , ticks = 0 , wobbleChance = 0.03 , startTick = 50 ; function loop( ) { w = window.innerWidth ; h = window.innerHeight ; radius = w * 0.05 ; diam = radius * 2 ; diam2x = diam * 2 ; if ( x > w) { vx *= - 1 ; dx *= - 1 ; x = w; } else if ( x < 0 ) { vx *= - 1 ; dx *= - 1 ; x = 0 ; } if ( y > h) { vy *= - 1 ; dy *= - 1 ; y = h; } else if ( y < 0 ) { vy *= - 1 ; dy *= - 1 ; y = 0 } if ( Math .random ( ) < wobbleChance || ticks === startTick) { dx += Math .random ( ) * 10 - 5 ; dy += Math .random ( ) * 10 - 5 ; } dx *= damp; dy *= damp; vx += ( dx - vx) / div; vy += ( dy - vy) / div; x += vx; y += vy; // in most cases these days you // just clear the whole canvas, but for // this example we clear a rectangle around // the circle c.clearRect ( x - diam, y - diam, diam2x, diam2x ) ; // draw the path c.fillStyle = 'red' c.beginPath ( ) ; c.arc ( x, y, radius, 0 , Math .PI * 2 , false ) ; c.fill ( ) ; ticks++; window.requestAnimationFrame ( loop) ; } loop( ) ; function resize( ) { canvas.width = window.innerWidth ; canvas.height = window.innerHeight ; } resize( ) ; window.addEventListener ( 'resize' , resize) ;
Try it out…
A wobbling ball with canvas.
Draw a Spiral with Resize
copy const canvas = document.body .appendChild ( document.createElement ( 'canvas' ) ) ; const c = canvas.getContext ( '2d' ) ; function resize( ) { canvas.width = window.innerWidth ; canvas.height = window.innerHeight ; draw( ) ; } function draw( ) { c.clearRect ( 0 , 0 , canvas.width , canvas.height ) ; c.fillStyle = 'blue' ; const iter = 300 , halfWidth = window.innerWidth / 2 , halfHeight = window.innerHeight / 2 ; let rad = 0 , theta = 0 , x, y; for ( let i = 0 ; i < iter; i++ ) { x = halfWidth + rad * Math .cos ( theta) ; y = halfHeight + rad * Math .sin ( theta) ; c.fillRect ( x, y, 5 , 5 ) ; rad += Math .min ( window.innerWidth , window.innerHeight ) * 0.0015 ; theta += .1; } } resize( ) ; window.addEventListener ( 'resize' , resize) ;
Try it out…
Expanding on yesterdays post, this draws a resizable sprial on a canvas.
Easy Canvas Resize
copy const canvas = document.body .appendChild ( document.createElement ( 'canvas' ) ) ; const c = canvas.getContext ( '2d' ) ; function resize( ) { canvas.width = window.innerWidth ; canvas.height = window.innerHeight ; draw( ) ; } function draw( ) { c.clearRect ( 0 , 0 , canvas.width , canvas.height ) ; c.fillStyle = 'red' ; // 30% width and height c.fillRect ( 30 , 30 , window.innerWidth * .3, window.innerHeight * .3) ; } resize( ) ; window.addEventListener ( 'resize' , resize) ;
Try it out…
Resizing a canvas is unusual, because setting the width/height
of a canvas completely erases it.
If your canvas isn’t animating, you can just redraw after resizing. Depending on what you’re drawing, working in percentages instead of pixel values can make things easier.
If you hit the “Try it out…” button, go into fullscreen and resize your browser window you’ll see things in action.