Mandala 10 - Spartan Circle
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj1 = new Image();
var imageObj = new Image();
var imageObj2 = new Image();
for ( var i=0; i<canvas.width; i+= 10) {
var x = canvas.width/2;
var y = canvas.height/2;
var w = canvas.width-i;
var h = canvas.height-i;
var rx = -w/2 -i/2
;
var ry = -h/2 -i/2;
var a = Math.PI*2 * Math.random();
var R1 = Math.round(Math.random() * 255);
var G1 = Math.round(Math.random()*i/255);
var B1 = 0;
var C1 = "rgba("+R1+","+G1+","+B1+",.4)";
var D1 = "rgba("+R1+","+B1+","+R1+",.5)";
var E1 = "rgba("+B1+","+R1+","+G1+",.1)";
var grd1 = context.createLinearGradient(rx/4,ry/4, rx+100, ry+100);
grd1.addColorStop(0, C1);
grd1.addColorStop(0.1, D1);
grd1.addColorStop(.2, E1);
SQUARE(x,y,w,h,rx,ry,a,grd1);
}
function SQUARE(x,y,w,h,rx,ry,a,grd1) {
context.save();
context.translate(x,y);
context.rotate(a);
context.beginPath();
context.fillStyle = grd1;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
imageObj1.onload = function() {
context.drawImage(imageObj1, canvas.width/2-175, canvas.height/2-150,canvas.width/2.5,canvas.height/2.5);
}
imageObj1.src = 'images/helmet.png';
for (var i=1; i<100; i+=20){
var cw= canvas.width/8
var ch= canvas.height/8
var a = Math.PI*2/ 8;
var w = canvas.width/2
var h = canvas.height/2
Spartan(imageObj,cw,ch,i,a);
}
function Spartan(){
imageObj.onload = function() {
;
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<15; i++) {
context.rotate(a);
//context.rotate(a*2);
context.translate (w/50-i,h/50-i);
context.drawImage(imageObj, -cw*2,-ch*2, cw*2, ch*2);
}
context.restore();
}
imageObj.src = 'images/spartan copy.png';
};
for (var i=1; i<100; i+=20){
var cw= canvas.width/8
var ch= canvas.height/8
var a = Math.PI*2/ 12;
var w = canvas.width/2
var h = canvas.height/2
Spartan1(imageObj,cw,ch,i,a);
}
function Spartan1(){
imageObj2.onload = function() {
;
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<63; i++) {
context.rotate(a);
context.translate (w/50-i,h/50-i,canvas.width/10,canvas.height/10);
context.drawImage(imageObj2, cw*1.5,ch*1.5, cw*1.5, ch*1.5);
}
context.restore();
}
imageObj2.src = 'images/spartan copy.png';
};
}
</script>
<title>IMAGES</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 9 - Flower Spiral
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imageObj1 = new Image();
for ( var i=1; i<canvas.width*2; i+= 10) {
var x = canvas.width/2;
var y = canvas.height/2;
var w = canvas.width-i/3;
var h = canvas.height-i/2;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -i;
var R = Math.round(Math.random()*i* 255);
var G = Math.round(Math.random()*i/255);
var B = Math.round(Math.random()*i/255);
var C = "rgba("+G+","+B+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.8)";
var E = "rgba("+R+","+G+","+B+",.4)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.8, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
for (var i=1; i<10; i+=10){
var cw= canvas.width/8+20
var ch= canvas.height/8
var a = Math.PI*2/ 18;
var w = canvas.width/2
var h = canvas.height/2
BulletRing(imageObj,cw,ch,i,a);
}
function BulletRing(imageObj,cw,ch,i,a){
imageObj.onload = function() {
;
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<19; i++) {
context.rotate(a);
context.translate (w/50-15,h/50-10);
context.drawImage(imageObj, (-cw/3)+100,-ch*3-40, cw, ch/3);
}
context.restore();
}
imageObj.src = 'images/bullet.png';
};
for (var i=1; i<100; i+=10){
var cw= canvas.width/8
var ch= canvas.height/8
var a = Math.PI*2/3 ;
var w = canvas.width/2
var h = canvas.height/2
BulletLine();
}
function BulletLine(){
imageObj1.onload = function() {
;
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<100; i+=10) {
context.rotate(a);
context.rotate(a);
context.translate (w/100+i,h/100-i);
context.drawImage(imageObj1, cw/8-50,ch/8-50, cw*3, ch/2);
}
context.restore();
}
imageObj1.src = 'images/bullet.png';
};
var inc = 100;
for (var i=0; i < canvas.height; i+=inc ) {
var grd=context.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0,"rgba(255,255,0,1)");
grd.addColorStop(.25, "rgba(0,255,0,1)");
grd.addColorStop(.5, "rgba(0,0,255,1)");
grd.addColorStop(.75,"rgba(255,0,0,1)");
/////////////////////////////////////////////////////////////////////////////
context.beginPath();
context.moveTo(0,canvas.height-i);
context.lineTo(i,0);
context.lineTo(0, 0);
context.fill;
context.fill();
context.stroke();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fill;
context.fill();
context.stroke();
context.stroke();
context.closePath();
}
};
</script>
<title>IMAGES</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 8 - I Don't Know What To Call This
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var x = 0;
var y = 0;
var w = canvas.width;
var h = canvas.height;
context.beginPath();
context.rect(x, y, w, h);
context.fill "#6bddd1";
context.fill();
for (var i=-500; i<canvas.height; i+=50) {
var cpx = canvas.width/2;
var cpy = i;
var R = (i/canvas.height) * 255;
context.beginPath();
context.moveTo(0,canvas.height);
context.quadraticCurveTo(cpx, cpy, canvas.width, canvas.height);
context.strokeStyle = "rgba("+R+",0,255,0.8)";
context.lineWidth = 2;
context.stroke();
context.closePath()
}
//////////////////////////////////
var inc = 0.1;
for (var i=0; i<=Math.PI*4 ; i+=inc) {
var x = canvas.width/2;
var y = canvas.height/2;
var sine1=Math.sin(i);
var cose1= Math.cos(i);
var rad=Math.random()*200;
context.moveTo(x,y);
context.lineTo(canvas.width/4+ cose1*rad, canvas.height/4 + sine1*rad);
context.lineWidth= .1;
context.stroke;
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width/4+ cose1*rad, canvas.height*3/4 + sine1*rad);
context.lineWidth= .1;
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width*3/4+ cose1*rad, canvas.height*3/4 + sine1*rad);
context.lineWidth= .1;
context.stroke();
context.moveTo(x,y);
context.lineTo(canvas.width*3/4 + cose1*rad, canvas.height/4 + sine1*rad);
context.lineWidth= .1;
context.stroke();
}
var grd=context.createRadialGradient(canvas.width/2, canvas.height/2, 300, canvas.width/2, canvas.height/2, 550);
grd.addColorStop(0,"rgba(255,255,0,.1)");
grd.addColorStop(.25, "rgba(0,255,0,.1)");
grd.addColorStop(.5, "rgba(0,0,255,.1)");
grd.addColorStop(.75,"rgba(255,0,0,.1)");
var inc = 20;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2-i/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i/2);
context.lineTo(i/2, canvas.height/2);
context.lineTo(0, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, 0);
context.lineTo(canvas.width/2, i/2);
context.lineTo(canvas.width/2, 0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2-i/2, 0);
context.lineTo(0, i/2);
// increment is 20
context.lineTo(0,0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width/2, canvas.height-i/2);
context.lineTo(canvas.width/2, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, canvas.height/2+i/2);
context.lineTo(i/2, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2+i/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2-i/2, canvas.height/2);
context.lineTo(0, canvas.height/2+i/2);
context.lineTo(0,canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width, canvas.height/2-i/2);
context.lineTo(canvas.width, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, i/2);
context.lineTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width-i/2, 0);
context.lineTo(canvas.width/2, i/2);
context.lineTo(canvas.width/2, 0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width,0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i/2);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, canvas.height-i/2);
context.lineTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, canvas.height/2+i/2);
context.lineTo(canvas.width/2+i/2, canvas.height);
context.lineTo(canvas.width/2, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width, canvas.height/2+i/2);
context.lineTo(canvas.width,canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "black";
context.lineWidth = 2;
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 7 -Canvas In Canvas
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d")
////////////////////////////////////// start here
for ( var i=1; i<canvas.width*2; i+= 10) {
var x = canvas.width/2;
var y = canvas.height/2;
var w = canvas.width-i/3;
var h = canvas.height-i/2;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -i;
var R = Math.round(Math.random()*i* 255);
var G = Math.round(Math.random()*i/255);
var B = Math.round(Math.random()*i/255);
var C = "rgba("+G+","+B+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.8)";
var E = "rgba("+R+","+G+","+B+",.4)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.8, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
var inc = 100;
for (var i=0; i < canvas.height; i+=inc ) {
var grd=context.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0,"rgba(0,255,0,1)");
grd.addColorStop(.25, "rgba(0,255,0,1)");
grd.addColorStop(.6, "rgba(0,255,255,1)");
grd.addColorStop(.9,"rgba(255,0,0,1)");
/////////////////////////////////////////////////////////////////////////////
context.beginPath();
context.moveTo(0,canvas.height-i);
context.lineTo(i,0);
context.lineTo(0, 0);
context.fill;
context.fill();
context.stroke();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fill;
context.fill();
context.stroke();
context.stroke();
context.closePath();
}
context.save();
context.translate(canvas.width/2,canvas.height/2)
for (var i=1; i<101; i+=10) {
context.rotate(Math.PI*2/4);
context.drawImage(canvas, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d")
////////////////////////////////////// start here
for ( var i=1; i<canvas.width*2; i+= 10) {
var x = canvas.width/2;
var y = canvas.height/2;
var w = canvas.width-i/3;
var h = canvas.height-i/2;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -i;
var R = Math.round(Math.random()*i* 255);
var G = Math.round(Math.random()*i/255);
var B = Math.round(Math.random()*i/255);
var C = "rgba("+G+","+B+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.8)";
var E = "rgba("+R+","+G+","+B+",.4)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.8, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
var inc = 100;
for (var i=0; i < canvas.height; i+=inc ) {
var grd=context.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0,"rgba(0,255,0,1)");
grd.addColorStop(.25, "rgba(0,255,0,1)");
grd.addColorStop(.6, "rgba(0,255,255,1)");
grd.addColorStop(.9,"rgba(255,0,0,1)");
/////////////////////////////////////////////////////////////////////////////
context.beginPath();
context.moveTo(0,canvas.height-i);
context.lineTo(i,0);
context.lineTo(0, 0);
context.fill;
context.fill();
context.stroke();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fill;
context.fill();
context.stroke();
context.stroke();
context.closePath();
}
context.save();
context.translate(canvas.width/2,canvas.height/2)
for (var i=1; i<101; i+=10) {
context.rotate(Math.PI*2/4);
context.drawImage(canvas, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 6 - Box Spirals
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var grd=context.createRadialGradient(canvas.width/2, canvas.height/2, 300, canvas.width/2, canvas.height/2, 550);
grd.addColorStop(0,"rgba(255,255,0,.8)");
grd.addColorStop(.25, "rgba(0,255,0,.8)");
grd.addColorStop(.5, "rgba(0,0,255,.8)");
grd.addColorStop(.75,"rgba(150,0,255,.8)");
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke();
for ( var i=1; i<canvas.width*2; i+= 40) {
var x = canvas.width/2-200;
var y = canvas.height/2+200;
var w = (canvas.width/2)-(i/4);
var h = (canvas.height/2-i/4);
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -Math.random()*i;
var R = Math.round(Math.random()*255);
var G = Math.round(Math.random()*255);
var B = Math.round(Math.random()*255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.4)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
for ( var i=1; i<canvas.width*2; i+= 40) {
var x = canvas.width/2-200;
var y = canvas.height/2-200;
var w = (canvas.width/2)-(i/4);
var h = (canvas.height/2-i/4);
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -Math.random()*i;
var R = Math.round(Math.random()*255);
var G = Math.round(Math.random()*255);
var B = Math.round(Math.random()*255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.4)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
for ( var i=1; i<canvas.width*2; i+= 40) {
var x = canvas.width/2+200;
var y = canvas.height/2+200;
var w = (canvas.width/2)-(i/4);
var h = (canvas.height/2-i/4);
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -Math.random()*i;
var R = Math.round(Math.random()*255);
var G = Math.round(Math.random()*255);
var B = Math.round(Math.random()*255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.4)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
for ( var i=1; i<canvas.width*2; i+= 40) {
var x = canvas.width/2+200;
var y = canvas.height/2-200;
var w = (canvas.width/2)-(i/4);
var h = (canvas.height/2-i/4);
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -Math.random()*i;
var R = Math.round(Math.random()*255);
var G = Math.round(Math.random()*255);
var B = Math.round(Math.random()*255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.4)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
for ( var i=1; i<canvas.width; i+= 20) {
var x = canvas.width/2;
var y = canvas.height/2;
var w = (canvas.width/4)-(i/4);
var h = (canvas.height/4-i/4);
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -Math.random()*i;
var R = Math.round(Math.random()*255);
var G = Math.round(Math.random()*255);
var B = Math.round(Math.random()*255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.4)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 5 - 4 Views
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
/* var grd=context.createRadialGradient(canvas.width/2, canvas.height/2, 300, canvas.width/2, canvas.height/2, 600);
grd.addColorStop(0,"rgba(255,255,0,.1)");
grd.addColorStop(.25, "rgba(0,255,0,.1)");
grd.addColorStop(.5, "rgba(0,0,255,.1)");
grd.addColorStop(.75,"rgba(255,0,0,.1)");*/
var grd=context.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0,"rgba(255,255,0,.5)");
grd.addColorStop(.25, "rgba(0,255,0,.4)");
grd.addColorStop(.5, "rgba(0,0,255,.4)");
grd.addColorStop(.75,"rgba(255,0,0,.5)");
var grd1=context.createLinearGradient(0,0,canvas.width,0);
grd1.addColorStop(0,"rgba(255,0,0,.5)");
grd1.addColorStop(.25, "rgba(0,0,255,.5)");
grd1.addColorStop(.5, "rgba(0,255,0,.5)");
grd1.addColorStop(.75,"rgba(255,255,0,.5)");
///////Background
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(i, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i);
context.lineTo(i, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, 0);
context.lineTo(canvas.width, i);
context.lineTo(canvas.width, 0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i); // increment is 20
context.lineTo(0,0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
for (var o=0; o<100; o+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + o;
var y2 = y + o;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
var R1 = Math.round(Math.random() * 255);
var G1= Math.round(Math.random() * 255);
var B1 = Math.round(Math.random() * 255);
var R2 = Math.round(Math.random() * 255);
var G2 = Math.round(Math.random() * 255);
var B2 = Math.round(Math.random() * 255);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
// var grd = context.createLinearGradient(x1,y1,x2,y2);
var grd3 = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd3.addColorStop(0, "rgba("+G+","+R+","+B+",0.3)");
grd3.addColorStop(0.5, "rgba("+B2+","+R2+","+G2+",0.6)");
grd3.addColorStop(1, "rgba("+R1+","+G1+","+B1+",1)");
context.fillStyle = grd3;
context.fill();
//context.stroke();
context.closePath();
}
var inc = 100;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2-i/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i/2);
context.lineTo(i/2, canvas.height/2);
context.lineTo(0, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, 0);
context.lineTo(canvas.width/2, i/2);
context.lineTo(canvas.width/2, 0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2-i/2, 0);
context.lineTo(0, i/2);
// increment is 20
context.lineTo(0,0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width/2, canvas.height-i/2);
context.lineTo(canvas.width/2, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, canvas.height/2+i/2);
context.lineTo(i/2, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2+i/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2-i/2, canvas.height/2);
context.lineTo(0, canvas.height/2+i/2);
context.lineTo(0,canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width, canvas.height/2-i/2);
context.lineTo(canvas.width, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, i/2);
context.lineTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width-i/2, 0);
context.lineTo(canvas.width/2, i/2);
context.lineTo(canvas.width/2, 0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width,0);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i/2);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, canvas.height-i/2);
context.lineTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, canvas.height/2+i/2);
context.lineTo(canvas.width/2+i/2, canvas.height);
context.lineTo(canvas.width/2, canvas.height);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2+i/2, canvas.height/2);
context.lineTo(canvas.width, canvas.height/2+i/2);
context.lineTo(canvas.width,canvas.height/2);
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "black";
context.lineWidth = 2;
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 4 - Colorful
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
////////////////////////
var grd=context.createRadialGradient(canvas.width/2, canvas.height/2, 300, canvas.width/2, canvas.height/2, 550);
grd.addColorStop(0,"rgba(255,255,0,.4)");
grd.addColorStop(.25, "rgba(0,255,0,.4)");
grd.addColorStop(.5, "rgba(0,0,255,.4)");
grd.addColorStop(.75,"rgba(255,0,0,.4)");
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke();
for (var o=0; o<25; o+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + o;
var y2 = y + o;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
var R1 = Math.round(Math.random() * 255);
var G1= Math.round(Math.random() * 255);
var B1 = Math.round(Math.random() * 255);
var R2 = Math.round(Math.random() * 255);
var G2 = Math.round(Math.random() * 255);
var B2 = Math.round(Math.random() * 255);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
// var grd = context.createLinearGradient(x1,y1,x2,y2);
var grd3 = context.createRadialGradient(x1,y1,rad/10,x1,y1,rad);
grd3.addColorStop(0, "rgba("+G+","+R+","+B+",0.4)");
grd3.addColorStop(0.5, "rgba("+B2+","+R2+","+G2+",0.8)");
grd3.addColorStop(1, "rgba("+R1+","+G1+","+B1+",.4)");
context.fillStyle = grd3;
context.fill();
//context.stroke();
context.closePath();
}
for ( var i=1; i<canvas.width*2; i+= 10) {
var x = canvas.width/2-250;
var y = canvas.height/2+250;
var w = canvas.width-i/2;
var h = canvas.height-i/2;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -i;
var R = Math.round(Math.random()*255);
var G = Math.round(Math.random()*255);
var B = Math.round(Math.random()*255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.4)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
for (var i=10; i<canvas.width; i+=30){
var grd = context.createLinearGradient(0,0, canvas.width, canvas.height);
grd.addColorStop(0, "red");
grd.addColorStop(0.6, "transparent");
grd.addColorStop(0.6, "transparent");
grd.addColorStop(1, "blue");
context.beginPath();
context.moveTo(i,0);
context.quadraticCurveTo((canvas.width+i)/2,i,canvas.width,i);
context.lineTo(canvas.width,i);
context.closePath();
context.fill;
context.fill();
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
////////////////////////
var grd=context.createRadialGradient(canvas.width/2, canvas.height/2, 300, canvas.width/2, canvas.height/2, 550);
grd.addColorStop(0,"rgba(255,255,0,.4)");
grd.addColorStop(.25, "rgba(0,255,0,.4)");
grd.addColorStop(.5, "rgba(0,0,255,.4)");
grd.addColorStop(.75,"rgba(255,0,0,.4)");
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke();
for (var o=0; o<25; o+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + o;
var y2 = y + o;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
var R1 = Math.round(Math.random() * 255);
var G1= Math.round(Math.random() * 255);
var B1 = Math.round(Math.random() * 255);
var R2 = Math.round(Math.random() * 255);
var G2 = Math.round(Math.random() * 255);
var B2 = Math.round(Math.random() * 255);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
// var grd = context.createLinearGradient(x1,y1,x2,y2);
var grd3 = context.createRadialGradient(x1,y1,rad/10,x1,y1,rad);
grd3.addColorStop(0, "rgba("+G+","+R+","+B+",0.4)");
grd3.addColorStop(0.5, "rgba("+B2+","+R2+","+G2+",0.8)");
grd3.addColorStop(1, "rgba("+R1+","+G1+","+B1+",.4)");
context.fillStyle = grd3;
context.fill();
//context.stroke();
context.closePath();
}
for ( var i=1; i<canvas.width*2; i+= 10) {
var x = canvas.width/2-250;
var y = canvas.height/2+250;
var w = canvas.width-i/2;
var h = canvas.height-i/2;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -i;
var R = Math.round(Math.random()*255);
var G = Math.round(Math.random()*255);
var B = Math.round(Math.random()*255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.4)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
for (var i=10; i<canvas.width; i+=30){
var grd = context.createLinearGradient(0,0, canvas.width, canvas.height);
grd.addColorStop(0, "red");
grd.addColorStop(0.6, "transparent");
grd.addColorStop(0.6, "transparent");
grd.addColorStop(1, "blue");
context.beginPath();
context.moveTo(i,0);
context.quadraticCurveTo((canvas.width+i)/2,i,canvas.width,i);
context.lineTo(canvas.width,i);
context.closePath();
context.fill;
context.fill();
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 3 - Disco Turtles
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
for (var i=0; i<canvas.width; i+=100) {
for (var j=0; j<canvas.height; j+=100) {
var x = 0 + i;
var y = 0 + j;
var w = 100 +i;
var h = 100 +j;
var R = Math.round(i/canvas.width * 255);
var G = Math.round(Math.random()*255);
var B = Math.round(j/canvas.width * 255);
var mycolor = "rgba("+R+","+G+","+B+",.5)";
//// CREATE SQUARE
myrect(x,y,w,h,mycolor);
}
}
function myrect(x,y,w,h,mycolor,i){
context.beginPath();
context.rect(x,y,w,h);
context.fill;
context.fill();
context.stroke();
context.closePath();
}
var imageObj1 = new Image();
for (var o=0; o<50; o+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*50+10;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x-5 ;
var y1 = y-5 ;
var x2 = x + o;
var y2 = y + o;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
// var grd = context.createLinearGradient(x1,y1,x2,y2);
var grd3 = context.createRadialGradient(x,y,rad/10,x1,y1,rad);
grd3.addColorStop(0, "rgba(0, 0, 255 ,.2)");
grd3.addColorStop(0.4,"rgba(0,0,255,.15)");
grd3.addColorStop(0.8, "rgba(0, 0, 255 ,.1)");
grd3.addColorStop(1, "rgba(0, 0, 255 ,.3)");
context.fillStyle = grd3;
context.fill();
//context.stroke();
context.closePath();
}
imageObj1.onload = function() {
context.drawImage(imageObj1, canvas.width/4*Math.random(), canvas.height/4*Math.random(),canvas.width/8,canvas.height/8);
context.drawImage(imageObj1, canvas.width/2*Math.random()+200, canvas.height/2*Math.random(),canvas.width/8,canvas.height/8);
context.drawImage(imageObj1, canvas.width/2*Math.random(), canvas.height/2*Math.random()+200,canvas.width/8,canvas.height/8);
context.drawImage(imageObj1, canvas.width/2*Math.random()+300, canvas.height/2*Math.random()+300,canvas.width/8,canvas.height/8);
context.drawImage(imageObj1, canvas.width/4*Math.random(), canvas.height/4*Math.random(),canvas.width/8,canvas.height/8);
context.drawImage(imageObj1, canvas.width/2*Math.random()+200, canvas.height/2*Math.random(),canvas.width/8,canvas.height/8);
context.drawImage(imageObj1, canvas.width/2*Math.random(), canvas.height/2*Math.random()+200,canvas.width/8,canvas.height/8);
context.drawImage(imageObj1, canvas.width/2*Math.random()+300, canvas.height/2*Math.random()+300,canvas.width/8,canvas.height/8);
}
imageObj1.src = 'images/turtle4.png';
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 2 - Crazy Eye
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke();
var grd=context.createRadialGradient(canvas.width/2, canvas.height/2, 300, canvas.width/2, canvas.height/2, 600);
grd.addColorStop(0,"rgba(255,255,0,.5)");
grd.addColorStop(.25, "rgba(0,255,0,.5)");
grd.addColorStop(.5, "rgba(0,0,255,.5)");
grd.addColorStop(.75,"rgba(255,0,0,.5)");
var inc = 100;
for (var i=0; i<canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(i, canvas.height);
context.lineTo(0, canvas.height);
context.lineWidth=1;
context.fill;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i,0);
context.lineTo(canvas.width, i);
context.lineTo(canvas.width, 0);
context.lineWidth=1;
context.fill;
context.fill();
context.stroke();
context.closePath();
}
context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 280, 0 , 2 * Math.PI, false);
context.fill "black";
context.fill();
context.stroke();
for ( var i=1; i<canvas.width*2; i+= 10) {
var x = canvas.width/2;
var y = canvas.height/2;
var w = canvas.width/2-i/4;
var h = canvas.height/2-i/4;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*1.5 -i;
var R = Math.round(Math.random()*i* 255);
var G = Math.round(Math.random()*i/255);
var B = Math.round(Math.random()*i/255);
var C = "rgba("+R+","+G+","+B+",.1)";
var D = "rgba("+B+","+G+","+R+",.8)";
var E = "rgba("+G+","+R+","+B+",.8)";
var grd = context.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(x,y); // NEW (0,0) coordinates
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.fillRect(rx,ry,w,h);
context.stroke();
context.closePath();
context.restore();
}
var grd1=context.createRadialGradient(canvas.width/2, canvas.height/2, 50, canvas.width/2, canvas.height/2, 200);
grd1.addColorStop(0,"rgba(200,0,0,1)");
grd1.addColorStop(1, "rgba(0,0,0,1)");
context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 100, 0 , 2 * Math.PI, false);
context.fill grd1;
context.fill();
context.stroke();
var inc = 0.2;
for (var i=0; i<=Math.PI*4 ; i+=inc) {
var x = canvas.width/2;
var y = canvas.height/2;
var sine1=Math.sin(i);
var cose1= Math.cos(i);
var rad=Math.random()*120+10;
context.moveTo(x,y);
context.lineTo(canvas.width/2+ cose1*rad, canvas.height/2 + sine1*rad);
context.lineWidth= .1;
context.stroke;
context.stroke();
}
}
</script>
<title>FUNCTIONS</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Mandala 1 - Nameless
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
for (var o = 0; o<500; o+=50){
circle();
}
function circle() {
for ( var i=0; i<canvas.width; i+= 10) {
var x = i;
var y = -i;
var w = 200-o;
var h = 200-o;
var rx = -w-i;
var ry = -h;
var a = Math.PI*2 * Math.random();
SQUARE(x,y,w,h,rx,ry,a,grd);
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
var C = "rgba("+R+","+G+","+B+",0.5)";
var D = "rgba("+B+","+G+","+R+",0.2)";
var E = "rgba("+G+","+R+","+B+",0.7)";
var grd = context.createLinearGradient(rx,ry, x, y);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(canvas.width/2,canvas.height/2); // NEW (0,0) coordinates
context.rotate(a);
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.strokeStyle = "white";
context.rect(rx,ry,w,h);
context.stroke();
context.fill();
context.closePath();
context.restore();
}
}
for (var i=0; i<canvas.width; i+=40) {
context.beginPath();
context.moveTo(canvas.width/2,i/2);
context.lineTo(canvas.width/2+i/2,canvas.height/2);
context.lineTo(0,canvas.height);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(canvas.width/2,+i/2);
context.lineTo(canvas.width/2-i/2,canvas.height/2);
context.lineTo(canvas.width,canvas.height);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(canvas.width/2,canvas.height-i/2);
context.lineTo(canvas.width/2-i/2,canvas.height/2);
context.lineTo(canvas.width,0);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(canvas.width/2,canvas.height-i/2);
context.lineTo(canvas.width/2+i/2,canvas.height/2);
context.lineTo(0,0);
context.closePath();
context.fill;
context.fill();
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
for (var o = 0; o<500; o+=50){
circle();
}
function circle() {
for ( var i=0; i<canvas.width; i+= 10) {
var x = i;
var y = -i;
var w = 200-o;
var h = 200-o;
var rx = -w-i;
var ry = -h;
var a = Math.PI*2 * Math.random();
SQUARE(x,y,w,h,rx,ry,a,grd);
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
var C = "rgba("+R+","+G+","+B+",0.5)";
var D = "rgba("+B+","+G+","+R+",0.2)";
var E = "rgba("+G+","+R+","+B+",0.7)";
var grd = context.createLinearGradient(rx,ry, x, y);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context.save();
context.translate(canvas.width/2,canvas.height/2); // NEW (0,0) coordinates
context.rotate(a);
context.rotate(a);
context.beginPath();
context.fillStyle = grd;
context.strokeStyle = "white";
context.rect(rx,ry,w,h);
context.stroke();
context.fill();
context.closePath();
context.restore();
}
}
for (var i=0; i<canvas.width; i+=40) {
context.beginPath();
context.moveTo(canvas.width/2,i/2);
context.lineTo(canvas.width/2+i/2,canvas.height/2);
context.lineTo(0,canvas.height);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(canvas.width/2,+i/2);
context.lineTo(canvas.width/2-i/2,canvas.height/2);
context.lineTo(canvas.width,canvas.height);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(canvas.width/2,canvas.height-i/2);
context.lineTo(canvas.width/2-i/2,canvas.height/2);
context.lineTo(canvas.width,0);
context.closePath();
context.fill;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(canvas.width/2,canvas.height-i/2);
context.lineTo(canvas.width/2+i/2,canvas.height/2);
context.lineTo(0,0);
context.closePath();
context.fill;
context.fill();
context.stroke();
}
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>