HTML Canvas

Here is the JavaScript for the first of my experiments with the HTML Canvas tag.

	var example;
	var context;
	var b =0;
	
	function init() {

		example = document.getElementById('canvas1');
		context = example.getContext('2d');
		b=0;
		draw();
		
	}
	
	function draw() {

		context.fillStyle = "rgb(255,255,255)";
		context.fillRect(0, 0, 400, 800);
		
		var icCount = 12;
		var number = Math.PI * 2 / icCount;
		
			for (n=1; n<= icCount; n++) {
			
				x = 200 + ((Math.sin(number * n * b)) * 150);
				y = 150 + ((Math.tan(number * n * b)) * 100);
				
				context.fillStyle = 'rgb(0,0,0)';
			
				context.beginPath();
				context.arc(x, y, 25, 0, Math.PI*2, true); 
				context.closePath();
				context.fill();

			}

		b += 0.02;
		
		setTimeout("draw()",33);
				
	}

Link to page:
https://roguelj.co.uk/sineart/a1.php

Link to other pages in this series:
https://roguelj.co.uk/toybox/

Link to the W3C School page about the HTML Canvas
https://www.w3schools.com/html/html5_canvas.asp