I've finally completed my first project, the html canvas drawing and I am very pleased with the end result. It is an abstract drawing, but I used calculated dimensions to get a certain look for the image. The more I played with coding working on this project, the clearer everything became and was a lot of fun trying different dimensions and colors to create my own little masterpiece. I also used graph paper to draw the background using different size squares to add an extra aesthetic element, by doing that I got a clearer view of the dimensions and how to layer different objects the way I wanted. Below is the VERY long list of codes I used for my canvas, and a few images of my progress from beginning to end.. Still working on how to save my image a jpeg.
Code
<!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.height; i+=10) {
context.beginPath();
var startX = 50;
var startY = 50;
var endX = canvas.width/2;
var endY = canvas.height/2;
// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, canvas.width, canvas.height);
// inner circle
var circ1X = 50;
var circ1Y = 10;
var circ1Radius = 100;
// outer circle
var circ2X = 20;
var circ2Y = 30;
var circ2Radius = i;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgb(100,100,240)");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.9;
grd.addColorStop(N, "rgb(200,250,250)");
// outer color
grd.addColorStop(1, "rgb(234,137,235)");
context.fillStyle = grd;
context.fill();
context.stroke();
}
/////// BEZIER CURVE #2
for (var i=0; i<canvas.height; i+=10) {
var startX = 500; ////canvas.height/.5;
var startY = i;
// starting point coordinates
var endX = 700; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+",150,243)";
context.stroke();
}
//// BEZIER CURVE #3
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 0;
// starting point coordinates
var endX = i; ////canvas.width;
var endY = 600;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/i;
var cpoint1Y = canvas.height/i; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+","+i/3+",240)";
context.stroke();
}
/////// BEZIER CURVE #1
for (var i=0; i<canvas.height; i+=10) {
var startX = 600; ////canvas.height/.5;
var startY = 400;
// starting point coordinates
var endX = i/8; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb("+i/2+",150,243)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 600; ////canvas.height/.5;
var startY = 500;
// starting point coordinates
var endX = 800; ////canvas.width;
var endY = i/2;
//control point 1 coordinates ( magnet )
var cpoint1X = i/8;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*.1/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i/2+","+i+",230)";
context.stroke();
}
//////// BIG RECTANGLES
//1
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 0, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(255,255,255)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(425, 0, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 75, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 150, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 225, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 300, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(125, 0, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 75, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(275, 150, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(350, 225, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(425, 300, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 375, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 450, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 525, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 150, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 225, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 300, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(225, 375, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 450, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 525, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////21
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 600, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////22
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 450, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 525, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 600, 75 , 75); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////////SMALL SQUARES INSIDE BIG
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(275, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(25, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(250, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(325, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(25, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(75, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////// LITTLE SQUARES #1
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(600, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(700, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(350, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(400, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(550, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(600, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(650, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(700, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(750, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(50, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(100, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(250, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////21
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////22
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(350, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(400, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(450, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(500, 500, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(550, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(600, 600, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 275, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(50, 325, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(100, 375, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////21
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 425, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////22
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 475, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(250, 525, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(300, 575, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// LITTLE SQUARES #2
///////////SMALL SQUARES INSIDE BIG
////1
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(525, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////2
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////// 3
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(625, 1000, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////4
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////5
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////6
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(775, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////7
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(225, 0, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(275, 50, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////8
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(325, 100, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////9
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(375, 150, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////10
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(425, 200, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////11
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(475, 250, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////12
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(525, 300, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////13
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(575, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//////14
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(625, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////15
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(675, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////16
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(725, 500, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////17
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(775, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///////18
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(0, 350, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
/////19
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(50, 400, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////20
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(100, 450, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
////23
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(150, 500, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
///// 24
context.beginPath();
for (var i=0; i<canvas.height; i+=100) {
context.rect(200, 550, 50 , 50); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(250,250,250)";
// for a square width = height , the width and the height have the same v
context.stroke();
}
//// BEZIER CURVE #3
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 500;
// starting point coordinates
var endX = i; ////canvas.width;
var endY = 600;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/i;
var cpoint1Y = canvas.height/i; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+","+i/3+",240)";
context.stroke();
}
/////// BEZIER CURVE #1
for (var i=0; i<canvas.height; i+=5) {
var startX = 600; ////canvas.height/.5;
var startY = 200;
// starting point coordinates
var endX = i/8; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+",150,243)";
context.stroke();
}
/////// BEZIER CURVE #2
for (var i=0; i<canvas.height; i+=10) {
var startX = 600; ////canvas.height/.5;
var startY = 650;
// starting point coordinates
var endX = i/8; ////canvas.width;
var endY = i/5;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/2;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb("+i/2+","+i/3+",240)";
context.stroke();
}
/////// BEZIER CURVE #2
for (var i=0; i<canvas.height; i+=5) {
var startX = 0; ////canvas.height/.5;
var startY = 600;
// starting point coordinates
var endX = 0; ////canvas.width;
var endY = i;
//control point 1 coordinates ( magnet )
var cpoint1X = canvas.width/1/10;
var cpoint1Y = canvas.height/2; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = i*2;
var cpoint2Y = 150;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i/2.6+","+i/4+",200)"////("+i/2+",150,243)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = i/4;
// starting point coordinates
var endX = 900; ////canvas.width;
var endY = 400;
//control point 1 coordinates ( magnet )
var cpoint1X = 200;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*1/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1.5;
context.strokeStyle = "rgb("+i+","+i/2+",215)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 300;
// starting point coordinates
var endX = 900; ////canvas.width;
var endY = 400;
//control point 1 coordinates ( magnet )
var cpoint1X = 200;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*.1/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i+","+i/2+",215)";
context.stroke();
}
/////BEZIER CURVE #5
for (var i=0; i<canvas.height; i+=5) {
var startX = 800; ////canvas.height/.5;
var startY = 500;
// starting point coordinates
var endX = 900; ////canvas.width;
var endY = 400;
//control point 1 coordinates ( magnet )
var cpoint1X = 200;
var cpoint1Y = i/.5; ///canvas.height/200;
/////control point 2 coordinates (magnet)
var cpoint2X = canvas.width*6/10;
var cpoint2Y = canvas.height*9/10;
//// Draw the Bezier curve
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb("+i+","+i/2+",215)";
context.stroke();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment