HTML Canvas: Javascript Code for Toybox A1

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

HTML Canvas Tag: ToyBox SineArt A1

ToyBox SineArt A1

 

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

Leave a Reply