Canvas!
This project is what I imagine my future
balcony to look like! I absolutely love plants and would love to have a whole
garden in the future. This project started out as just the simple idea of a
cactus and along the way I decided to add more plant to it. On the right a
tulip and on the left a helenium. The Cactus is made up of big Bezier curve and smaller Bezier curves along the sides. The spikes are all quadratic curves and the flowers are 5 big Bezier curves with 5 smaller Bezier curves on the inside,in different colors, to give it some contrast, with a circle in the center. The tulip is made of Bezier and quadratic curves, while the flowers are small Bezier curves in side one another. The helenium in quadratic curves with small circles that have colorful gradients as the flowers. The flower pots are one ¾ths of an arc, one square and a trapezium. The background is just a blue gradient made to look like the sky and the clouds are Bezier curves that overlap each other to give them that nice fluffy look. This took me about 12 hours to finish!
code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(300, 0, 300, 500);
grd.addColorStop(0, "rgb(64,224,208)");
grd.addColorStop(.5, "rgb(0,191,255)");
grd.addColorStop(1, "rgb(65,105,225)");
context.fillStyle = grd;
context.fill();
//matera 1
var x=300;
var y=350;
var width = 200
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillRect(300, 350, 200, 50);
context.fillStyle = 'rgb(255,127,80)';
context.strokeStyle = 'rgb(255,127,80)';
context.fill();
context.stroke();
//matera 2
var x= 315;
var y = 400;
var x1 = 485;
var y1 = 400;
var x2 = 450;
var y2 = 500;
var x3 = 330;
var y3 = 500;
var x4 = 315;
var y4 = 400;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineTo(x3, y3);
context.lineTo(x4, y4);
context.lineCap = 'square';
context.lineWidth = 10;
context.strokeStyle = 'rgb(255,127,80)';
context.stroke();
context.fillStyle = 'rgb(255,99,71)';
context.fill();
//cactus 1
var startX = 330;
var startY = 350;
// control point 1 coordinates ( magnet )
var cpointX1 = 180;
var cpointY1 = 30;
// control point 2 coordinates ( magnet )
var cpointX2 = 600;
var cpointY2 = 40;
// ending point coordinates
var endX = 470;
var endY = 350;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(60,179,113)";
context.stroke();
context.fillStyle = "rgb(60,179,113)";
context.fill();
//cactus 2
var startX = 300;
var startY = 200;
// control point 1 coordinates ( magnet )
var cpointX1 = 150;
var cpointY1 = 120;
// control point 2 coordinates ( magnet )
var cpointX2 = 300;
var cpointY2 = 80;
// ending point coordinates
var endX = 310;
var endY = 160;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(60,179,113)";
context.stroke();
context.fillStyle = "rgb(60,179,113)";
context.fill();
//cactus 3
var startX = 480;
var startY = 300;
// control point 1 coordinates ( magnet )
var cpointX1 = 750;
var cpointY1 = 180;
// control point 2 coordinates ( magnet )
var cpointX2 = 500;
var cpointY2 = 120;
// ending point coordinates
var endX = 480;
var endY = 260;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(60,179,113)";
context.stroke();
context.fillStyle = "rgb(60,179,113)";
context.fill();
//cactus 4
var startX = 550;
var startY = 200;
// control point 1 coordinates ( magnet )
var cpointX1 = 500;
var cpointY1 = 180;
// control point 2 coordinates ( magnet )
var cpointX2 = 570;
var cpointY2 = 100;
// ending point coordinates
var endX = 560;
var endY = 200;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(60,179,113)";
context.stroke();
context.fillStyle = "rgb(60,179,113)";
context.fill();
//cactus 5
var startX = 280;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 250;
var cpointY1 = 50;
// control point 2 coordinates ( magnet )
var cpointX2 = 350;
var cpointY2 = 100;
// ending point coordinates
var endX = 280;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(60,179,113)";
context.stroke();
context.fillStyle = "rgb(60,179,113)";
context.fill();
// flower
//petal 1
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 400;
var cpointY1 = 80;
// control point 2 coordinates ( magnet )
var cpointX2 = 500;
var cpointY2 = 80;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,182,193)";
context.stroke();
context.fillStyle = "rgb(255,182,193)";
context.fill();
//petal 2
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 500;
var cpointY1 = 180;
// control point 2 coordinates ( magnet )
var cpointX2 = 500;
var cpointY2 = 80;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,182,193)";
context.stroke();
context.fillStyle = "rgb(255,182,193)";
context.fill();
//petal 3
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 550;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 420;
var cpointY2 = 200;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,182,193)";
context.stroke();
context.fillStyle = "rgb(255,182,193)";
context.fill();
//petal 4
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 450;
var cpointY1 = 220;
// control point 2 coordinates ( magnet )
var cpointX2 = 350;
var cpointY2 = 180;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,182,193)";
context.stroke();
context.fillStyle = "rgb(255,182,193)";
context.fill();
//petal 5
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 350;
var cpointY1 = 160;
// control point 2 coordinates ( magnet )
var cpointX2 = 380;
var cpointY2 = 80;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,182,193)";
context.stroke();
context.fillStyle = "rgb(255,182,193)";
context.fill();
//flower 2
//petal 6
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 400;
var cpointY1 = 160;
// control point 2 coordinates ( magnet )
var cpointX2 = 400;
var cpointY2 = 110;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,105,180)";
context.stroke();
context.fillStyle = "rgb(255,105,180)";
context.fill();
//petal 7
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 420;
var cpointY1 = 100;
// control point 2 coordinates ( magnet )
var cpointX2 = 475;
var cpointY2 = 100;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,105,180)";
context.stroke();
context.fillStyle = "rgb(255,105,180)";
context.fill();
//petal 8
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 480;
var cpointY1 = 170;
// control point 2 coordinates ( magnet )
var cpointX2 = 500;
var cpointY2 = 100;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,105,180)";
context.stroke();
context.fillStyle = "rgb(255,105,180)";
context.fill();
//petal 9
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 520;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 430;
var cpointY2 = 180;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,105,180)";
context.stroke();
context.fillStyle = "rgb(255,105,180)";
context.fill();
//petal 10
var startX = 440;
var startY = 150;
// control point 1 coordinates ( magnet )
var cpointX1 = 450;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 380;
var cpointY2 = 180;
// ending point coordinates
var endX = 440;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(255,105,180)";
context.stroke();
context.fillStyle = "rgb(255,105,180)";
context.fill();
//flower center
var centerX = 440;
var centerY = 150;
var radius = 3;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.strokeStyle = "rgb(199,21,133)";
context.stroke()
//spikes
//1
var startX = 350;
var startY = 330;
// control point coordinates ( magnet )
var cpointX = 355;
var cpointY = 300;
// ending point coordinates
var endX = 360;
var endY = 330;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//2
var startX = 390;
var startY = 300;
// control point coordinates ( magnet )
var cpointX = 395;
var cpointY = 270;
// ending point coordinates
var endX = 400;
var endY = 300;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//3
var startX = 430;
var startY = 330;
// control point coordinates ( magnet )
var cpointX = 435;
var cpointY = 300;
// ending point coordinates
var endX = 440;
var endY = 330;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//4
var startX = 320;
var startY = 300;
// control point coordinates ( magnet )
var cpointX = 325;
var cpointY = 270;
// ending point coordinates
var endX = 330;
var endY = 300;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//5
var startX = 350;
var startY = 270;
// control point coordinates ( magnet )
var cpointX = 355;
var cpointY = 240;
// ending point coordinates
var endX = 360;
var endY = 270;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//6
var startX = 460;
var startY = 300;
// control point coordinates ( magnet )
var cpointX = 465;
var cpointY = 270;
// ending point coordinates
var endX = 470;
var endY = 300;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//7
var startX = 430;
var startY = 270;
// control point coordinates ( magnet )
var cpointX = 435;
var cpointY = 240;
// ending point coordinates
var endX = 440;
var endY = 270;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//7
var startX = 510;
var startY = 270;
// control point coordinates ( magnet )
var cpointX = 515;
var cpointY = 240;
// ending point coordinates
var endX = 520;
var endY = 270;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//8
var startX = 460;
var startY = 240;
// control point coordinates ( magnet )
var cpointX = 465;
var cpointY = 210;
// ending point coordinates
var endX = 470;
var endY = 240;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//9
var startX = 390;
var startY = 240;
// control point coordinates ( magnet )
var cpointX = 395;
var cpointY = 210;
// ending point coordinates
var endX = 400;
var endY = 240;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//10
var startX = 430;
var startY = 210;
// control point coordinates ( magnet )
var cpointX = 435;
var cpointY = 180;
// ending point coordinates
var endX = 440;
var endY = 210;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//11
var startX = 350;
var startY = 210;
// control point coordinates ( magnet )
var cpointX = 355;
var cpointY = 180;
// ending point coordinates
var endX = 360;
var endY = 210;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//12
var startX = 320;
var startY = 240;
// control point coordinates ( magnet )
var cpointX = 325;
var cpointY = 210;
// ending point coordinates
var endX = 330;
var endY = 240;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//13
var startX = 320;
var startY = 180;
// control point coordinates ( magnet )
var cpointX = 325;
var cpointY = 150;
// ending point coordinates
var endX = 330;
var endY = 180;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//14
var startX = 390;
var startY = 180;
// control point coordinates ( magnet )
var cpointX = 395;
var cpointY = 150;
// ending point coordinates
var endX = 400;
var endY = 180;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//16
var startX = 350;
var startY = 150;
// control point coordinates ( magnet )
var cpointX = 355;
var cpointY = 120;
// ending point coordinates
var endX = 360;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//15
var startX = 280;
var startY = 150;
// control point coordinates ( magnet )
var cpointX = 285;
var cpointY = 120;
// ending point coordinates
var endX = 290;
var endY = 150;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//16
var startX = 270;
var startY = 180;
// control point coordinates ( magnet )
var cpointX = 275;
var cpointY = 150;
// ending point coordinates
var endX = 280;
var endY = 180;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//17
var startX = 520;
var startY = 220;
// control point coordinates ( magnet )
var cpointX = 525;
var cpointY = 190;
// ending point coordinates
var endX = 530;
var endY = 220;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//18
var startX = 550;
var startY = 230;
// control point coordinates ( magnet )
var cpointX = 555;
var cpointY = 200;
// ending point coordinates
var endX = 560;
var endY = 230;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();
//plant 2
//Arc // pott 2
var x = 120
var y = 405
var x1 = 280
var y1 = 405
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'square';
context.lineWidth = 10;
context.strokeStyle = 'rgb(255,99,71)';
context.stroke();
context.fillStyle = 'rgb(255,99,71)';
context.fill();
var x = 200;
var y = 430;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
context.fillStyle = 'rgb(255,99,71)';
context.fill();
//plant
// starting point coordinates
var startX = 150;
var startY = 405;
// control point 1 coordinates ( magnet )
var cpointX1 = 30;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 100;
var cpointY2 = 200;
// ending point coordinates
var endX = 180;
var endY = 405;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(34,139,34)";
context.stroke();
context.fillStyle = "rgb(34,139,34)"
context.fill();
// leaf 2
var startX = 180;
var startY = 405;
// control point 1 coordinates ( magnet )
var cpointX1 = 100;
var cpointY1 = 150;
// control point 2 coordinates ( magnet )
var cpointX2 = 150;
var cpointY2 = 150;
// ending point coordinates
var endX = 210;
var endY = 405;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(34,139,34)";
context.stroke();
context.fillStyle = "rgb(34,139,34)"
context.fill();
// leaf 3
var startX = 210;
var startY = 405;
// control point 1 coordinates ( magnet )
var cpointX1 = 220;
var cpointY1 = 150;
// control point 2 coordinates ( magnet )
var cpointX2 = 250;
var cpointY2 = 150;
// ending point coordinates
var endX = 240;
var endY = 405;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(34,139,34)";
context.stroke();
context.fillStyle = "rgb(34,139,34)"
context.fill();
// leaf 4
var startX = 240;
var startY = 405;
// control point 1 coordinates ( magnet )
var cpointX1 = 320;
var cpointY1 = 180;
// control point 2 coordinates ( magnet )
var cpointX2 = 350;
var cpointY2 = 180;
// ending point coordinates
var endX = 270;
var endY = 405;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(34,139,34)";
context.stroke();
context.fillStyle = "rgb(34,139,34)"
context.fill();
// leaf 5
var startX = 215;
var startY = 405;
// control point 1 coordinates ( magnet )
var cpointX1 = 280;
var cpointY1 = 180;
// control point 2 coordinates ( magnet )
var cpointX2 = 300;
var cpointY2 = 180;
// ending point coordinates
var endX = 255;
var endY = 405;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(154,205,50)";
context.stroke();
context.fillStyle = "rgb(154,205,50)"
context.fill();
// leaf 6
var startX = 195;
var startY = 405;
// control point 1 coordinates ( magnet )
var cpointX1 = 180;
var cpointY1 = 180;
// control point 2 coordinates ( magnet )
var cpointX2 = 200;
var cpointY2 = 180;
// ending point coordinates
var endX = 225;
var endY = 405;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(154,205,50)";
context.stroke();
context.fillStyle = "rgb(154,205,50)"
context.fill();
// leaf 7
var startX = 165;
var startY = 405;
// control point 1 coordinates ( magnet )
var cpointX1 = 50;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 125;
var cpointY2 = 200;
// ending point coordinates
var endX = 195;
var endY = 405;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(154,205,50)";
context.stroke();
context.fillStyle = "rgb(154,205,50)"
context.fill();
//pot 2 line 2
var x = 120
var y = 405
var x1 = 280
var y1 = 405
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'square';
context.lineWidth = 10;
context.strokeStyle = 'rgb(255,99,71)';
context.stroke();
context.fillStyle = 'rgb(255,99,71)';
context.fill();
// plant 3
//pot 3
var x=530;
var y=400;
var width = 190
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.strokeStyle = 'rgb(220,20,60))';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(128,0,0");
//intermediate color
grd.addColorStop(0.5, "rgb(178,34,34)");
// ending color
grd.addColorStop(1, "rgb(139,0,0)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//plant 3
//leaf 1
// starting point coordinates
var startX = 580;
var startY = 400;
// control point coordinates ( magnet )
var cpointX = 480;
var cpointY = 120;
// ending point coordinates
var endX = 620;
var endY = 400;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(107,142,35)";
context.stroke();
context.fillStyle = 'rgb(107,142,35)';
context.fill();
//leaf 2
// starting point coordinates
var startX = 600;
var startY = 400;
// control point coordinates ( magnet )
var cpointX = 700;
var cpointY = 120;
// ending point coordinates
var endX = 640;
var endY = 400;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(107,142,35)";
context.stroke();
context.fillStyle = 'rgb(107,142,35)';
context.fill();
//flower 2
// starting point coordinates
var startX = 610;
var startY = 400;
// control point 1 coordinates ( magnet )
var cpointX1 = 550;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 680;
var cpointY2 = 180;
// ending point coordinates
var endX = 620;
var endY = 120;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 3;
context.strokeStyle = 'rgb(107,142,35)';
context.stroke();
//flower 2
// petal 1
var startX = 600;
var startY = 100;
// control point 1 coordinates ( magnet )
var cpointX1 = 550;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 700;
var cpointY2 = 180;
// ending point coordinates
var endX = 600;
var endY = 100;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255,0,0)';
context.fillStyle = 'rgb(255,0,0)'
context.fill();
context.stroke();
// petal 2
var startX = 600;
var startY = 100;
// control point 1 coordinates ( magnet )
var cpointX1 = 550;
var cpointY1 = 180;
// control point 2 coordinates ( magnet )
var cpointX2 = 680;
var cpointY2 = 160;
// ending point coordinates
var endX = 600;
var endY = 100;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255,99,71)';
context.fillStyle = 'rgb(255,99,71)'
context.fill();
context.stroke();
// petal 3
var startX = 600;
var startY = 100;
// control point 1 coordinates ( magnet )
var cpointX1 = 560;
var cpointY1 = 170;
// control point 2 coordinates ( magnet )
var cpointX2 = 670;
var cpointY2 = 140;
// ending point coordinates
var endX = 600;
var endY = 100;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255,140,0)';
context.fillStyle = 'rgb(255,140,0)'
context.fill();
context.stroke();
//flower 3
var startX = 610;
var startY = 400;
// control point 1 coordinates ( magnet )
var cpointX1 = 550;
var cpointY1 = 200;
// control point 2 coordinates ( magnet )
var cpointX2 = 720;
var cpointY2 = 230;
// ending point coordinates
var endX = 700;
var endY = 180;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 3;
context.strokeStyle = 'rgb(107,142,35)';
context.stroke();
//flower 3
var centerX = 700;
var centerY = 180;
var radius = 25;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(238,130,238)");
grd.addColorStop(1, "rgb(186,85,211)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(139,0,139)";
context.stroke();
// cyan flower plant 2
var centerX = 150;
var centerY = 380;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(127,255,212)");
grd.addColorStop(1, "rgb(64,224,208)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,139,139)";
context.stroke();
//2
var centerX = 200;
var centerY = 300;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(127,255,212)");
grd.addColorStop(1, "rgb(64,224,208)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,139,139)";
context.stroke();
// 3 gold
var centerX = 80;
var centerY = 280;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(255,215,0)");
grd.addColorStop(1, "rgb(255,615,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(210,105,30)";
context.stroke();
// 4
var centerX = 250;
var centerY = 390;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(255,215,0)");
grd.addColorStop(1, "rgb(255,165,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(210,105,30)";
context.stroke();
// 5 pink
var centerX = 240;
var centerY = 340;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(255,105,180)");
grd.addColorStop(1, "rgb(255,20,147)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(199,21,133)";
context.stroke();
// 6
var centerX = 125;
var centerY = 310;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(255,105,180)");
grd.addColorStop(1, "rgb(255,20,147)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(199,21,133)";
context.stroke();
// 7 purle
var centerX = 170;
var centerY = 340;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(238,130,238)");
grd.addColorStop(1, "rgb(186,85,211)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(139,0,139)";
context.stroke();
// 8
var centerX = 300;
var centerY = 300;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(238,130,238)");
grd.addColorStop(1, "rgb(186,85,211)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(139,0,139)";
context.stroke();
// orange
var centerX = 250;
var centerY = 270;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(255,140,0)");
grd.addColorStop(1, "rgb(255,69,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(255,69,0)";
context.stroke();
// 10
var centerX = 140;
var centerY = 240;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 15);
grd.addColorStop(0, "rgb(255,140,0)");
grd.addColorStop(1, "rgb(255,69,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(255,69,0)";
context.stroke();
//ledge
var x = 0
var y = 510
var x1 = 800
var y1 = 510
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'square';
context.lineWidth = 10;
context.strokeStyle = ' rgb(139,69,19)';
context.stroke();
context.fillStyle = ' rgb(139,69,19)';
context.fill();
//cloud
// starting point coordinates
var startX = 48;
var startY = 60;
// control point 1 coordinates ( magnet )
var cpointX1 = 10;
var cpointY1 = 8;
// control point 2 coordinates ( magnet )
var cpointX2 = 110;
var cpointY2 = 30;
// ending point coordinates
var endX = 80;
var endY = 60;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 80;
var startY = 60;
// control point 1 coordinates ( magnet )
var cpointX1 = 90;
var cpointY1 = 10;
// control point 2 coordinates ( magnet )
var cpointX2 = 140;
var cpointY2 = 30;
// ending point coordinates
var endX = 120;
var endY = 60;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 120;
var startY = 60;
// control point 1 coordinates ( magnet )
var cpointX1 = 180;
var cpointY1 = 50;
// control point 2 coordinates ( magnet )
var cpointX2 = 140;
var cpointY2 = 110;
// ending point coordinates
var endX = 120;
var endY = 90;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 120;
var startY = 90;
// control point 1 coordinates ( magnet )
var cpointX1 = 140;
var cpointY1 = 120;
// control point 2 coordinates ( magnet )
var cpointX2 = 70;
var cpointY2 = 120;
// ending point coordinates
var endX = 90;
var endY = 90;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 90;
var startY = 90;
// control point 1 coordinates ( magnet )
var cpointX1 = 80;
var cpointY1 = 120;
// control point 2 coordinates ( magnet )
var cpointX2 = 10;
var cpointY2 = 120;
// ending point coordinates
var endX = 45;
var endY = 60;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
var x=50;
var y=60;
var width = 80
var height= 29;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = '"white"';
context.strokeStyle = '"white"';
context.fill();
context.stroke();
//cloud 2
// starting point coordinates
var startX = 648;
var startY = 60;
// control point 1 coordinates ( magnet )
var cpointX1 = 610;
var cpointY1 = 8;
// control point 2 coordinates ( magnet )
var cpointX2 = 710;
var cpointY2 = 30;
// ending point coordinates
var endX = 680;
var endY = 60;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 680;
var startY = 60;
// control point 1 coordinates ( magnet )
var cpointX1 = 690;
var cpointY1 = 10;
// control point 2 coordinates ( magnet )
var cpointX2 = 740;
var cpointY2 = 30;
// ending point coordinates
var endX = 720;
var endY = 60;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 720;
var startY = 60;
// control point 1 coordinates ( magnet )
var cpointX1 = 780;
var cpointY1 = 50;
// control point 2 coordinates ( magnet )
var cpointX2 = 740;
var cpointY2 = 110;
// ending point coordinates
var endX = 720;
var endY = 90;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 720;
var startY = 90;
// control point 1 coordinates ( magnet )
var cpointX1 = 740;
var cpointY1 = 120;
// control point 2 coordinates ( magnet )
var cpointX2 = 670;
var cpointY2 = 120;
// ending point coordinates
var endX = 690;
var endY = 90;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
// starting point coordinates
var startX = 690;
var startY = 90;
// control point 1 coordinates ( magnet )
var cpointX1 = 680;
var cpointY1 = 120;
// control point 2 coordinates ( magnet )
var cpointX2 = 610;
var cpointY2 = 120;
// ending point coordinates
var endX = 645;
var endY = 60;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
context.fillStyle = "white";
context.fill();
var x=650;
var y=60;
var width = 80
var height= 29;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = '"white"';
context.strokeStyle = '"white"';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No hay comentarios:
Publicar un comentario