Adventures in Digital Art!: Classiest Mermaid Ever

"Dream Big"

The making of.

I can't even begin to describe how completely, utterly, elated I am to be done with this. All in all, I'm pretty happy with how she turned out. Fun fact: this HTML file is almost five times as big as my balloons one!

The massive code for this monster is after the jump - click "Read More" if you reeeaallllyy want to.

The Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Dream Big </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}

</style>
</head>

<body>

<canvas id="myCanvas" width="600" height="600"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//DEEP SEA BACKGROUND
context.beginPath();
context.rect(0, 0, 600, 600);
var grd = context.createLinearGradient(300, 0, 300, 500);
grd.addColorStop(0, "rgb(154,219,245)");
grd.addColorStop(.85, "rgb(13,52,92)");
grd.addColorStop(1, "rgb(15,38,77)");

context.fillStyle = grd;
context.fill();

//MERMAID HAIR
context.beginPath();
context.moveTo(130, 250);

context.bezierCurveTo(-40, 200, 100, 150, 20, 100);
context.quadraticCurveTo(60, 130, 70, 120);
context.bezierCurveTo(100, 100, 30, 60, 60, 10);
context.bezierCurveTo(60, 30, 60, 50, 100, 60);
context.quadraticCurveTo(110, 60, 110, 40);
context.bezierCurveTo(150, 50, 130, 80, 200, 50);
context.bezierCurveTo(150, 160, 300, 200, 130, 250);

var grd = context.createLinearGradient(300, 50, 300, 300);
grd.addColorStop(0, "rgb(255,242,214)");
grd.addColorStop(.75, "rgb(255,237,156)");
grd.addColorStop(1, "rgb(255,226,140)");

context.fillStyle = grd;
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//MERMAID HAIR LINES
//LINE ONE (LEFTMOST)
context.beginPath();
context.moveTo(130, 250);

context.bezierCurveTo(-20, 200, 100, 150, 20, 100);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE TWO
context.beginPath();
context.moveTo(150, 210);

context.bezierCurveTo(50, 240, 110, 150, 20, 100);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE THREE
context.beginPath();
context.moveTo(150, 210);

context.bezierCurveTo(100, 220, 90, 150, 60, 122);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE FOUR
context.beginPath();
context.moveTo(150, 210);

context.bezierCurveTo(120, 220, 90, 150, 65, 122);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE FIVE
context.beginPath();
context.moveTo(160, 210);

context.bezierCurveTo(120, 220, 90, 150, 77, 100);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE SIX
context.beginPath();
context.moveTo(130, 150);

context.bezierCurveTo(130, 20, 90, 150, 55, 25);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE SEVEN
context.beginPath();
context.moveTo(135, 150);

context.bezierCurveTo(230, -0, 100, 100, 105, 60);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE EIGHT
context.beginPath();
context.moveTo(130, 150);

context.bezierCurveTo(160, 0, 90, 150, 55, 25);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE NINE
context.beginPath();
context.moveTo(150, 220);

context.bezierCurveTo(250, 90, 130, 150, 190, 55);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE TEN
context.beginPath();
context.moveTo(150, 220);

context.bezierCurveTo(280, 160, 140, 150, 190, 55);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE ELEVEN
context.beginPath();
context.moveTo(150, 220);

context.bezierCurveTo(280, 200, 140, 110, 190, 55);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//MERMAID RIGHT UPPER ARM
context.beginPath();
context.moveTo(185, 240);

context.quadraticCurveTo(150, 200, 210, 270);
context.quadraticCurveTo(220, 290, 205, 280);
context.quadraticCurveTo(130, 200, 185, 240);

context.fillStyle = "rgb(255,232,201)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();
context.lineJoin = 'round';

//MERMAID RIGHT LOWER ARM
context.beginPath();
context.moveTo(210, 275);

context.quadraticCurveTo(230, 270, 275, 272);
context.quadraticCurveTo(290, 280, 283, 279);
context.quadraticCurveTo(190, 295, 210, 275);

context.fillStyle = "rgb(255,232,201)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();
context.lineJoin = 'round';

//MERMAID TORSO
context.beginPath();
context.moveTo(120, 307);

context.quadraticCurveTo(145, 290, 120, 240);
context.quadraticCurveTo(100, 220, 140, 220);
context.quadraticCurveTo(150, 215, 140, 205);
context.lineTo(160, 205);
context.quadraticCurveTo(155, 215, 160, 220);
context.quadraticCurveTo(205, 220, 180, 235);
context.quadraticCurveTo(165, 300, 200, 307);
context.quadraticCurveTo(175, 340, 120, 307);

context.fillStyle = "rgb(255,232,201)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//MERMAID BELLY BUTTON
context.beginPath();
context.moveTo(156,290);

context.lineTo(156,295)

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//MERMAID CLEAVAGE
//TOP
context.beginPath();
context.moveTo(135,230);

context.quadraticCurveTo(155, 230, 151, 245);
context.quadraticCurveTo(150, 230, 168, 230);

context.lineWidth = 3;
context.lineJoin = 'round';
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//BOTTOM
context.beginPath();
context.moveTo(130,260);

context.quadraticCurveTo(150, 265, 151, 251);
context.quadraticCurveTo(170, 275, 168, 240);

context.lineWidth = 3;
//context.lineJoin = 'bevel';
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//MERMAID SHELL BRA
//LEFT SHELL
context.beginPath();
context.moveTo(140, 265);

context.bezierCurveTo(100, 230, 130, 230, 140, 265);
context.bezierCurveTo(110, 220, 145, 230, 140, 265);
context.bezierCurveTo(130, 225, 160, 230, 140, 265);
context.bezierCurveTo(120, 270, 160, 270, 140, 265);

context.fillStyle = "rgb(255,140,169)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(240,65,123)";
context.stroke();

//RIGHT SHELL
context.beginPath();
context.moveTo(163, 265);

context.bezierCurveTo(170, 225, 145, 230, 163, 265);
context.bezierCurveTo(190, 220, 160, 230, 163, 265);
context.bezierCurveTo(210, 225, 170, 230, 163, 265);
context.bezierCurveTo(140, 270, 185, 270, 163, 265);

context.fillStyle = "rgb(255,140,169)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(240,65,123)";
context.stroke();

//MUSIC WAVE
context.beginPath();
context.moveTo(170, 205);

context.quadraticCurveTo(210, 140, 240, 170);
context.quadraticCurveTo(280, 190, 290, 120);
context.quadraticCurveTo(300, 50, 400, 20);
context.quadraticCurveTo(500, -70, 500, 0);
context.quadraticCurveTo(700, -250, 600, 130);
context.quadraticCurveTo(700, 500, 600, 130);
context.quadraticCurveTo(550, 280, 450, 200);
context.quadraticCurveTo(400, 150, 300, 200);
context.quadraticCurveTo(250, 230, 200, 205);

context.fillStyle = "rgba(255,255,255,.5)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgba(255,255,255,.5)";
context.stroke();

//VIOLIN
//BOTTOM
context.beginPath();
context.moveTo(170, 205);

context.quadraticCurveTo(200, 220, 205, 225);
context.quadraticCurveTo(190, 225, 215, 235);
context.quadraticCurveTo(210, 230, 230, 245);
context.quadraticCurveTo(260, 270, 204, 270);
context.quadraticCurveTo(207, 245, 189, 260);
context.quadraticCurveTo(200, 240, 175, 250);
context.quadraticCurveTo(130, 230, 170, 210);

context.fillStyle = "rgb(138,66,3)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//TOP
context.beginPath();
context.moveTo(170, 195);

context.quadraticCurveTo(200, 200, 205, 210);
context.quadraticCurveTo(190, 225, 215, 220);
context.quadraticCurveTo(210, 230, 230, 230);
context.quadraticCurveTo(260, 265, 204, 255);
context.quadraticCurveTo(207, 242, 190, 245);
context.quadraticCurveTo(200, 230, 175, 235);
context.quadraticCurveTo(130, 220, 170, 195);

//context.fillStyle = "rgb(179,99,30)";
//context.fill();

var grd = context.createLinearGradient(250, 200, 260, 300);
grd.addColorStop(0, "rgb(181,103,25)");
grd.addColorStop(.9, "rgb(179,99,70)");
context.fillStyle = grd;
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//DEPTH LINE ONE
context.beginPath();
context.moveTo(152, 235);

context.lineTo(152,220);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//DEPTH LINE TWO
context.beginPath();
context.moveTo(175, 249);

context.lineTo(175,234);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//DEPTH LINE THREE
context.beginPath();
context.moveTo(190, 258);

context.lineTo(190,243);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//AWKWARD CLOSE PIECE
context.beginPath();
context.moveTo(285, 278);

context.lineTo(285, 290);
context.bezierCurveTo(330, 330, 320, 260, 300, 285);
context.lineTo(285, 278);

context.fillStyle = "rgb(138,66,3)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//AWKWARD CLOSE PIECE LINE ONE
context.beginPath();
context.moveTo(305, 288);

context.quadraticCurveTo(320, 290, 305, 295);

context.lineWidth = 2;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//AWKWARD CLOSE PIECE LINE ONE
context.beginPath();
context.moveTo(285, 280);

context.lineTo(305, 295);

context.lineWidth = 2;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//TURNY KNOBS LEFT
var centerX = canvas.width / 2.07;
var centerY = canvas.height / 2.05;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//TURNY KNOBS RIGHT
var centerX = canvas.width / 2;
var centerY = canvas.height / 2.01;
var radius = 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//AWKWARD FAR AWAY PIECE
context.beginPath();
context.moveTo(235, 255);

context.lineTo(235,268);
context.lineTo(249,255);
context.lineTo(235,255);

context.fillStyle = "rgb(138,66,3)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//SMALL BOX
context.beginPath();
context.moveTo(160, 195);

context.lineTo(190,215);
context.lineTo(182,223);
context.lineTo(150,205);
context.lineTo(160,200);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//LONG BOX
context.beginPath();
context.moveTo(210, 230);

context.lineTo(280,275);
context.lineTo(290,280);
context.lineTo(202,238);
context.lineTo(210,230);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//SIDEWAYS LINE THING
context.beginPath();
context.moveTo(195, 220);

context.lineTo(188,227);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();

//STRING ONE
context.beginPath();
context.moveTo(160, 195);

context.lineTo(295, 282);

context.lineWidth = .8;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();

//STRING TWO
context.beginPath();
context.moveTo(152, 195);

context.lineTo(295, 282);

context.lineWidth = .8;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();

//STRING THREE
context.beginPath();
context.moveTo(144, 195);

context.lineTo(295, 282);

context.lineWidth = .8;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();

//STRING FOUR
context.beginPath();
context.moveTo(135, 195);

context.lineTo(295, 282);

context.lineWidth = .8;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();

//MERMAID RIGHT HAND
context.beginPath();
context.moveTo(280, 270);

context.quadraticCurveTo(270, 290, 295, 280);
context.quadraticCurveTo(290, 270, 280, 270);

context.fillStyle = "rgb(255,232,201)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();
context.lineJoin = 'round';

//MERMAID FINGERS RIGHT
//ONE
context.beginPath();
context.moveTo(285, 270);

context.lineTo(278,283);

context.lineWidth = 1.5;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//TWO
context.beginPath();
context.moveTo(290, 273);

context.lineTo(280,283);

context.lineWidth = 1.5;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//THREE
context.beginPath();
context.moveTo(294, 276);

context.lineTo(282,283);

context.lineWidth = 1.5;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//MERMAID HEAD
context.beginPath();
context.moveTo(130, 195);

context.quadraticCurveTo(120, 205, 172, 212);
context.quadraticCurveTo(179, 200, 176, 183);
context.quadraticCurveTo(178, 170, 175, 160);
context.quadraticCurveTo(150, 135, 125, 160);
context.quadraticCurveTo(120, 170, 125, 180);
context.quadraticCurveTo(110, 180, 130, 195);

context.fillStyle = "rgb(255,232,201)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();
context.lineJoin = 'round';

//MERMAID FACE
//LEFT EYE
context.beginPath();
context.moveTo(160, 183);

context.quadraticCurveTo(155, 175, 150, 180);
context.lineTo(147,177);

context.lineWidth = 2;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//RIGHT EYE
context.beginPath();
context.moveTo(172, 183);

context.quadraticCurveTo(173, 175, 178, 177);
context.lineTo(182,175);

context.lineWidth = 2;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOSE
context.beginPath();
context.moveTo(168, 192);

context.lineTo(173,190);

context.lineWidth = 2;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//LOWER LIP
context.beginPath();
context.moveTo(155, 198);

context.quadraticCurveTo(175, 209, 177, 200);
context.lineTo(161,200);

context.fillStyle = "rgb(252,98,98)";
context.fill();

context.lineWidth = 1.5;
context.strokeStyle = "rgb(179,20,20)";
context.stroke();

//UPPER LIP
context.beginPath();
context.moveTo(159, 200);

context.quadraticCurveTo(170, 195, 167, 200);
context.quadraticCurveTo(175, 195, 177, 200);

context.fillStyle = "rgb(252,98,98)";
context.fill();

context.lineWidth = 1.5;
context.strokeStyle = "rgb(179,20,20)";
context.stroke();

//LEFT CHEEK BLUSH
var centerX = canvas.width / 4.15;
var centerY = canvas.height / 3.13;
var radius = 8;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(242,165,193,.2)";
context.fill();

//MERMAID BANGS
context.beginPath();
context.moveTo(100, 180);

context.bezierCurveTo(100, 180, 100, 100, 165, 140);
context.bezierCurveTo(215, 200, 100, 140, 100, 180);

var grd = context.createLinearGradient(200, 100, 300, 300);
grd.addColorStop(0, "rgb(255,242,214)");
grd.addColorStop(.75, "rgb(255,237,156)");
grd.addColorStop(1, "rgb(255,226,140)");

context.fillStyle = grd;
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//MERMAID BANGS LINES
//LINE ONE (LEFTMOST)
context.beginPath();
context.moveTo(100, 180);

context.bezierCurveTo(130, 180, 100, 100, 165, 140);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE TWO
context.beginPath();
context.moveTo(100, 180);

context.bezierCurveTo(130, 220, 110, 100, 165, 140);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE THREE
context.beginPath();
context.moveTo(130, 170);

context.bezierCurveTo(180, 170, 100, 105, 165, 140);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE FOUR
context.beginPath();
context.moveTo(130, 170);

context.bezierCurveTo(195, 170, 100, 105, 165, 140);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//LINE FIVE
context.beginPath();
context.moveTo(130, 170);

context.bezierCurveTo(220, 170, 100, 105, 165, 140);

context.lineWidth = 2;
context.strokeStyle = "rgb(255,227,105)";
context.stroke();

//STARFISH
context.beginPath();
context.moveTo(107, 170);

context.quadraticCurveTo(112,135,115,170);
context.quadraticCurveTo(145,162,119,178);
context.quadraticCurveTo(120,210,110,183);
context.quadraticCurveTo(90,205,105,178);
context.quadraticCurveTo(80,155,107,170);

var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);
grd.addColorStop(0, "rgb(257,125,9)");
grd.addColorStop(1, "rgb(255,203,59)");

context.fillStyle = grd;
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(247,123,35)";
context.stroke();

//MERMAID BOTTOM FINS
//LEFT FIN
context.beginPath();
context.moveTo(170, 530);

context.bezierCurveTo(200, 470, -30, 530, 70, 455);
context.bezierCurveTo(5, 470, -20, 600, 152, 550);

context.fillStyle = "rgba(158,255,234,.6)";
context.fill();

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.8)";
context.stroke();

//RIGHT FIN
context.beginPath();
context.moveTo(160, 540);

context.bezierCurveTo(300, 550, 300, 580, 300, 800);
context.bezierCurveTo(500, 800, 210, 700, 152, 550);

context.fillStyle = "rgba(158,255,234,.6)";
context.fill();

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.8)";
context.stroke();

//MERMAID BOTTOM FIN LINES
//LEFT FIN LINE ONE
context.beginPath();
context.moveTo(170, 530);
context.bezierCurveTo(150, 470, -30, 540, 70, 455);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//LEFT FIN LINE TWO
context.beginPath();
context.moveTo(160, 540);
context.bezierCurveTo(130, 480, -40, 550, 70, 455);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//LEFT FIN LINE THREE
context.beginPath();
context.moveTo(150, 550);
context.bezierCurveTo(100, 490, -50, 570, 70, 455);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//LEFT FIN LINE FOUR
context.beginPath();
context.moveTo(145, 555);
context.bezierCurveTo(110, 515, -60, 590, 70, 455);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//RIGHT FIN LINE ONE
context.beginPath();
context.moveTo(160, 545);
context.bezierCurveTo(270, 560, 300, 580, 300, 800);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//RIGHT FIN LINE TWO
context.beginPath();
context.moveTo(150, 550);
context.bezierCurveTo(240, 570, 300, 580, 300, 800);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//RIGHT FIN LINE THREE
context.beginPath();
context.moveTo(150, 552);
context.bezierCurveTo(190, 580, 300, 580, 300, 800);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//RIGHT FIN LINE FOUR
context.beginPath();
context.moveTo(150, 552);
context.bezierCurveTo(190, 620, 300, 580, 300, 800);

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.5)";
context.stroke();

//MERMAID TAIL MAIN
context.beginPath();

var x = canvas.width / 3.7;
var y = canvas.height / 2.3;
var radius = 60;
var startAngle = .75 * Math.PI;
var endAngle = .278 * Math.PI;
var counterClockwise = true;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.bezierCurveTo(200, 400, 430, 380, 150, 550);
context.bezierCurveTo(350, 350, 50, 500, 110, 336);

context.closePath();

var grd = context.createLinearGradient(125, 300, 300, 300);
grd.addColorStop(0, "rgb(4,135,150)");
grd.addColorStop(.4, "rgb(20,230,217)");
grd.addColorStop(1, "rgb(0,230,191)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//MERMAID SCALES
//FIRST LINE
context.beginPath();
context.moveTo(120, 307);

context.quadraticCurveTo(130, 350, 140, 318);
context.quadraticCurveTo(150, 350, 160, 322);
context.quadraticCurveTo(170, 350, 180, 319);
context.quadraticCurveTo(190, 350, 200, 311);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//SECOND LINE
context.beginPath();
context.moveTo(115, 327);

context.quadraticCurveTo(120, 365, 132, 334);
context.quadraticCurveTo(140, 365, 152, 338);
context.quadraticCurveTo(160, 365, 172, 338);
context.quadraticCurveTo(180, 365, 192, 333);
context.quadraticCurveTo(200, 365, 207, 335);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//THIRD LINE
context.beginPath();
context.moveTo(107, 350);

context.quadraticCurveTo(120, 380, 125, 350);
context.quadraticCurveTo(140, 380, 145, 354);
context.quadraticCurveTo(160, 380, 165, 354);
context.quadraticCurveTo(180, 380, 185, 349);
context.quadraticCurveTo(200, 380, 205, 350);
context.quadraticCurveTo(220, 380, 225, 354);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//FOURTH LINE
context.beginPath();
context.moveTo(103, 375);

context.quadraticCurveTo(110, 395, 119, 367);
context.quadraticCurveTo(130, 395, 139, 367);
context.quadraticCurveTo(150, 395, 159, 367);
context.quadraticCurveTo(170, 395, 179, 367);
context.quadraticCurveTo(190, 395, 199, 367);
context.quadraticCurveTo(210, 395, 219, 367);
context.quadraticCurveTo(230, 395, 239, 367);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//FIFTH LINE
context.beginPath();
context.moveTo(107, 393);

context.quadraticCurveTo(115, 405, 128, 383);
context.quadraticCurveTo(135, 405, 148, 383);
context.quadraticCurveTo(155, 405, 168, 383);
context.quadraticCurveTo(180, 405, 188, 383);
context.quadraticCurveTo(200, 405, 208, 383);
context.quadraticCurveTo(220, 405, 228, 383);
context.quadraticCurveTo(240, 405, 248, 371);
context.quadraticCurveTo(240, 405, 268, 385);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//SIXTH LINE
context.beginPath();
context.moveTo(118, 410);

context.quadraticCurveTo(120, 410, 120, 396);
context.quadraticCurveTo(135, 425, 140, 395);
context.quadraticCurveTo(155, 425, 160, 395);
context.quadraticCurveTo(180, 425, 180, 396);
context.quadraticCurveTo(200, 425, 200, 397);
context.quadraticCurveTo(210, 425, 220, 397);
context.quadraticCurveTo(230, 425, 240, 392);
context.quadraticCurveTo(250, 425, 260, 391);
context.quadraticCurveTo(270, 425, 274, 391);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//SEVENTH LINE
context.beginPath();
context.moveTo(134, 411);

context.quadraticCurveTo(150, 435, 154, 412);
context.quadraticCurveTo(165, 437, 174, 412);
context.quadraticCurveTo(185, 440, 194, 412);
context.quadraticCurveTo(205, 445, 214, 412);
context.quadraticCurveTo(230, 443, 234, 411);
context.quadraticCurveTo(250, 443, 254, 410);
context.quadraticCurveTo(270, 443, 274, 407);
context.quadraticCurveTo(285, 440, 286, 411);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//EIGTH LINE
context.beginPath();
context.moveTo(205, 430);

context.quadraticCurveTo(220, 455, 225, 429);
context.quadraticCurveTo(240, 455, 245, 428);
context.quadraticCurveTo(260, 455, 265, 428);
context.quadraticCurveTo(280, 455, 288, 422);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//NINTH LINE
context.beginPath();
context.moveTo(220, 450);

context.quadraticCurveTo(230, 467, 240, 443);
context.quadraticCurveTo(250, 467, 260, 443);
context.quadraticCurveTo(270, 467, 282, 440);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//TENTH LINE
context.beginPath();
context.moveTo(214, 470);

context.quadraticCurveTo(230, 480, 234, 457);
context.quadraticCurveTo(240, 480, 254, 457);
context.quadraticCurveTo(250, 480, 274, 457);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//ELEVENTH LINE
context.beginPath();
context.moveTo(205, 490);

context.quadraticCurveTo(220, 495, 225, 475);
context.quadraticCurveTo(230, 495, 245, 470);
context.quadraticCurveTo(240, 495, 261, 470);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//TWELFTH LINE
context.beginPath();
context.moveTo(192, 505);

context.quadraticCurveTo(200, 515, 212, 494);
context.quadraticCurveTo(220, 515, 234, 484);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//THIRTEENTH LINE
context.beginPath();
context.moveTo(180, 520);

context.quadraticCurveTo(200, 525, 203, 507);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//FOURTEENTH LINE
context.beginPath();
context.moveTo(170, 530);

context.quadraticCurveTo(190, 530, 203, 510);

context.lineWidth = 2;
context.strokeStyle = "rgb(9,110,117)";
context.stroke();

//MERMAID TOP FINS
context.beginPath();
context.moveTo(155, 320);

context.bezierCurveTo(100, 350, 60, 250, 155, 320);
context.bezierCurveTo(210, 350, 250, 250, 155, 320);

context.fillStyle = "rgba(158,255,234,.6)";
context.fill();

context.lineWidth = 2;
context.strokeStyle = "rgba(24,148,121,.8)";
context.stroke();

//MERMAID LEFT UPPER ARM
context.beginPath();
context.moveTo(112, 225);

context.quadraticCurveTo(100, 240, 100, 280);
context.quadraticCurveTo(105, 300, 112, 284);
context.quadraticCurveTo(135, 205, 112, 225);

context.fillStyle = "rgb(255,232,201)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();
context.lineJoin = 'round';

//THE THING YOU PLAY THE VIOLIN WITH
context.beginPath();
context.moveTo(165, 300);

context.lineTo(200, 165);

context.lineWidth = 3.5;
context.strokeStyle = "rgb(87,46,10)";
context.stroke();

//MERMAID LEFT LOWER ARM
context.beginPath();
context.moveTo(102, 287);

context.quadraticCurveTo(100, 270, 160, 275);
context.bezierCurveTo(195, 250, 175, 310, 160, 284);
context.quadraticCurveTo(100, 300, 102, 287);

context.fillStyle = "rgb(255,232,201)";
context.fill();

context.lineWidth = 3;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();
context.lineJoin = 'round';

//MERMAID FINGERS LEFT
//ONE
context.beginPath();
context.moveTo(170, 275);

context.lineTo(180,272);

context.lineWidth = 1.5;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//TWO
context.beginPath();
context.moveTo(169, 280);

context.lineTo(180,277);

context.lineWidth = 1.5;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//THREE
context.beginPath();
context.moveTo(170, 284);

context.lineTo(176,283);

context.lineWidth = 1.5;
context.strokeStyle = "rgb(227,198,148)";
context.stroke();

//MUSIC NOTES
//NOTE ONE CIRCLE
var centerX = canvas.width / 2.8;
var centerY = canvas.height / 2.9;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE ONE LINE
context.beginPath();
context.moveTo(216, 210);

context.lineTo(216,190);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE TWO CIRCLE ONE
var centerX = canvas.width / 2.31;
var centerY = canvas.height / 3.1;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE TWO LINES
context.beginPath();
context.moveTo(262, 191);

context.lineTo(262,175);
context.lineTo(278,175);
context.lineTo(278,191);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE TWO CIRCLE TWO
var centerX = canvas.width / 2.15;
var centerY = canvas.height / 3.1;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE TWO LINE THREE
context.beginPath();
context.moveTo(262, 182);

context.lineTo(278,182);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE THREE CIRCLE ONE
var centerX = canvas.width / 1.61;
var centerY = canvas.height / 6;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE THREE LINES
context.beginPath();
context.moveTo(375, 100);

context.lineTo(375,80);
context.lineTo(391,80);
context.lineTo(391,100);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE THREE CIRCLE TWO
var centerX = canvas.width / 1.53;
var centerY = canvas.height / 6;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE THREE LINE THREE
context.beginPath();
context.moveTo(375, 87);

context.lineTo(391,87);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FOUR CIRCLE ONE
var centerX = canvas.width / 1.15;
var centerY = canvas.height / 2.8;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FOUR LINES
context.beginPath();
context.moveTo(525, 215);

context.lineTo(525,195);
context.lineTo(541,195);
context.lineTo(541,215);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FOUR CIRCLE TWO
var centerX = canvas.width / 1.115;
var centerY = canvas.height / 2.8;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FOUR LINE THREE
context.beginPath();
context.moveTo(525, 200);

context.lineTo(541,200);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FIVE CIRCLE ONE
var centerX = canvas.width / 1.25;
var centerY = canvas.height / 17;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FIVE LINES
context.beginPath();
context.moveTo(480, 34);

context.lineTo(480,14);
context.lineTo(496,14);
context.lineTo(496,34);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FIVE CIRCLE TWO
var centerX = canvas.width / 1.206;
var centerY = canvas.height / 17;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE FIVE LINE THREE
context.beginPath();
context.moveTo(480, 20);

context.lineTo(496, 20);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE SIX CIRCLE
var centerX = canvas.width / 1.9;
var centerY = canvas.height / 6;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE SIX LINE
context.beginPath();
context.moveTo(318, 100);

context.lineTo(318,80);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE SEVEN CIRCLE
var centerX = canvas.width / 1.4;
var centerY = canvas.height / 4;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE SEVEN LINE
context.beginPath();
context.moveTo(431, 150);

context.lineTo(431, 130);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE SEVEN ARC
var x = canvas.width / 1.385;
var y = canvas.height / 4.4;
var radius = 5;
var startAngle = 1.4 * Math.PI;
var endAngle = 2.2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE EIGHT CIRCLE
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 5.7;
var radius = 2.5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgb(0,0,0)";
context.fill();

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE EIGHT LINE
context.beginPath();
context.moveTo(547, 105);

context.lineTo(547, 85);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//NOTE EIGHT ARC
var x = canvas.width / 1.094;
var y = canvas.height / 6.7;
var radius = 5;
var startAngle = 1.4 * Math.PI;
var endAngle = 2.2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 2.5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//BUBBLE ONE
var centerX = canvas.width / 1.2;
var centerY = canvas.height / 1.3;
var radius = 15;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE ONE HIGHLIGHT
var x = canvas.width / 1.2;
var y = canvas.height / 1.3;
var radius = 12;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE TWO
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 1.5;
var radius = 13;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE TWO HIGHLIGHT
var x = canvas.width / 1.1;
var y = canvas.height / 1.5;
var radius = 10;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE THREE
var centerX = canvas.width / 1.15;
var centerY = canvas.height / 1.6;
var radius = 10;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE THREE HIGHLIGHT
var x = canvas.width / 1.15;
var y = canvas.height / 1.6;
var radius = 7;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE FOUR
var centerX = canvas.width / 25;
var centerY = canvas.height / 8;
var radius = 11;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE FOUR HIGHLIGHT
var x = canvas.width / 25;
var y = canvas.height / 8;
var radius = 8;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE FIVE
var centerX = canvas.width / 20;
var centerY = canvas.height / 11;
var radius = 8;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE FIVE HIGHLIGHT
var x = canvas.width / 20;
var y = canvas.height / 11;
var radius = 5;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE SIX
var centerX = canvas.width / 2.5;
var centerY = canvas.height / 4;
var radius = 5;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE SIX HIGHLIGHT
var x = canvas.width / 2.5;
var y = canvas.height / 4;
var radius = 2;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE SEVEN
var centerX = canvas.width / 15;
var centerY = canvas.height / 1.05;
var radius = 20;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE SEVEM HIGHLIGHT
var x = canvas.width / 15;
var y = canvas.height / 1.05;
var radius = 17;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE EIGHT
var centerX = canvas.width / 10;
var centerY = canvas.height / 1.15;
var radius = 11;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE EIGHT HIGHLIGHT
var x = canvas.width / 10;
var y = canvas.height / 1.15;
var radius = 8;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE NINE
var centerX = canvas.width / 7;
var centerY = canvas.height / 1.01;
var radius = 6;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE NINE HIGHLIGHT
var x = canvas.width / 7;
var y = canvas.height / 1.01;
var radius = 3;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

//BUBBLE FOUR
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 1.7;
var radius = 4;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(161,242,255,.5)";
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "rgba(145,213,242,.5)";
context.stroke();

//BUBBLE FOUR HIGHLIGHT
var x = canvas.width / 1.1;
var y = canvas.height / 1.7;
var radius =1;
var startAngle = 1.6 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();

</script>
</body>
</html>

Adventures in Digital Art!

Sunday, September 8, 2013

Classiest Mermaid Ever - Final HTML5 Canvas Project

No comments:

Post a Comment