Coding Math Template

Simple canvas template for following along with coding math videos

by Marcus Baptiste

HTML

<canvas id='canvas' width='400' height='400'>
</canvas>

CSS

canvas {
    display: block;
}

JavaScript

var canvas = document.getElementById('canvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var centerY = height * .5;
var centerX = width * .5;
var offset = height * .4;
var speed = 0.1;
var angle = 0;
var ctx = canvas.getContext('2d');

render();

function render() {
    var y = centerY * Math.sin(angle) * offset;
    
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    ctx.arc(centerX, y, 50, 0, Math.PI * 2, false);
    ctx.fill();
    
    angle += speed;
    
    window.requestAnimationFrame(render);
}