The Ladybug and the Fireflies

Yeah... Turns out that I'm not a huge fan of HTML.
But this is what I made with what I've learned so far.


Andd here's the finished product!

This is the code. To make it work, you MUST change any parentheses () to < > BEFORE "start here" and AFTER "end here."

CODE:


(!DOCTYPE HTML)
(html)
(head)
(meta charset="UTF-8")
(title) here goes the title of your project (/title)

(script_

window.onload = function() {

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start here

// Background

context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = "rgb(0,00,0)";
context.fill();
context.closePath();

// BACKGROUND BUBBLES

context.beginPath();
context.arc(100,200,100,0,6.3,false);
context.fillStyle = "rgba(20,175,100,.2)";
context.fill();
context.closePath();

context.beginPath();
context.arc(0,100,50,0,6.3,false);
context.fillStyle = "rgba(20,200,100,.2)";
context.fill();
context.closePath();

context.beginPath();
context.arc(0,120,20,0,6.3,false);
context.fillStyle = "rgba(20,200,100,.2)";
context.fill();
context.closePath();

context.beginPath();
context.arc(50,300,40,0,6.3,false);
context.fillStyle = "rgba(20,250,100,.2)";
context.fill();
context.closePath();

context.beginPath();
context.arc(100,400,70,0,6.3,false);
context.fillStyle = "rgba(20,250,75,.2)";
context.fill();
context.closePath();

context.beginPath();
context.arc(200,400,10,0,6.3,false);
context.fillStyle = "rgba(10,230,75,.4)";
context.fill();
context.closePath();

context.beginPath();
context.arc(350,400,90,0,6.3,false);
context.fillStyle = "rgba(30,250,120,.4)";
context.fill();
context.closePath();

context.beginPath();
context.arc(300,500,60,0,6.3,false);
context.fillStyle = "rgba(10,200,75,.4)";
context.fill();
context.closePath();

context.beginPath();
context.arc(400,505,80,0,6.3,false);
context.fillStyle = "rgba(10,255,50,.4)";
context.fill();
context.closePath();

context.beginPath();
context.arc(500,475,70,0,6.3,false);
context.fillStyle = "rgba(0,255,105,.4)";
context.fill();
context.closePath();

context.beginPath(); context.arc(700,555,90,0,6.3,false);
context.fillStyle = "rgba(30,255,65,.4)";
context.fill();
context.closePath();

context.beginPath();
context.arc(600,530,90,0,6.3,false);
context.fillStyle = "rgba(30,255,175,.2)";
context.fill();
context.closePath();

// FIREFLIES
context.beginPath();
context.arc(550,200,20,0,6.3,false);
context.fillStyle = "rgb(220,255,0)";
context.fill();
context.closePath();

context.beginPath();
context.arc(550,200,30,0,6.3,false);
context.fillStyle = "rgba(220,255,0,.3)";
context.fill();
context.closePath();

context.beginPath();
context.arc(550,200,40,0,6.3,false);
context.fillStyle = "rgba(220,255,0,.2)";
context.fill();
context.closePath();

context.beginPath();
context.arc(640,100,20,0,6.3,false);
context.fillStyle = "rgb(220,255,0)";
context.fill();
context.closePath();

context.beginPath();
context.arc(640,100,30,0,6.3,false);
context.fillStyle = "rgba(220,255,0,.3)";
context.fill();
context.closePath();

context.beginPath();
context.arc(640,100,40,0,6.3,false);
context.fillStyle = "rgba(220,255,0,.2)";
context.fill();
context.closePath();

// LEAF AND STEM
context.beginPath();
context.moveTo(0,590);
context.lineWidth =12;
context.lineTo(30,550);
context.lineTo(40,545);
context.lineTo(45,545);
context.lineTo(50,540);
context.lineTo(57,500);
context.lineTo(60,460);
context.lineTo(99,300);
context.strokeStyle = "rgb(200,105,65)";
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(100,300);
context.quadraticCurveTo(400,600,500,200);
context.stroke();
context.strokeStyle = "rgb(50,240,100)";
context.fillStyle = "rgb(0,200,105)";
context.fill();

context.moveTo(100,300);
context.quadraticCurveTo(0,50,500,200);
context.stroke();
context.strokeStyle = "rgb(50,240,100)";
context.fillStyle = "rgb(0,200,105)";
context.fill();
context.closePath();

context.moveTo(100,300);
context.lineTo(498,202);
context.stroke();
context.strokeStyle = "rgb(100,240,200)";

context.moveTo(250,262);
context.lineTo(400,400);
context.stroke();
context.strokeStyle = "rgb(50,240,100)";

context.moveTo(246,263);
context.lineTo(201,143);
context.stroke();

context.moveTo(300,250);
context.lineTo(280,147);
context.stroke();

context.moveTo(300,250);
context.lineTo(450,339);
context.stroke();

context.beginPath();
context.moveTo(0,590);
context.lineWidth =12;
context.lineTo(30,550);
context.lineTo(40,545);
context.lineTo(45,545);
context.lineTo(50,540);
context.lineTo(57,500);
context.lineTo(60,460);
context.lineTo(99,300);
context.strokeStyle = "rgb(200,105,65)";
context.stroke();
context.closePath();

// LADYBUG
// HEAD
context.beginPath();
context.arc(430,190,23,0,6.3,false);
//context.fillStyle = "rgb(60,60,60)";
var grd = context.createRadialGradient(360,205,60,200,60,300);
grd.addColorStop(0, 'rgb(60,60,60)');
grd.addColorStop(1, 'yellow');
context.fillStyle = grd;
context.fill();
context.closePath();

context.beginPath();
context.arc(440,190,10,0,6.3,false);
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.closePath();

context.beginPath();
context.arc(443,188,8,0,6.3,false);
context.fillStyle = "rgb(20,100,255)";
context.fill();
context.closePath();

context.beginPath();
context.lineWidth = 5;
context.arc(440,205,2,0,3.14,false);
context.closePath();
context.fillStyle = 'rgb(255,20,20)';
context.fill();
context.strokeStyle = "rgb(255,20,20)";
context.stroke();

//LEGS
context.beginPath();
context.lineWidth = 10;
context.arc(400,210,5,0,3.14,false);
context.closePath();
context.fillStyle = 'rgb(60,60,60)';
context.fill();
context.strokeStyle = "rgb(60,60,60)";
context.stroke();

context.beginPath();
context.lineWidth = 10;
context.arc(300,210,5,0,3.14,false);
context.closePath();
context.fillStyle = 'rgb(60,60,60)';
context.fill();
context.strokeStyle = "rgb(60,60,60)";
context.stroke();

//BODY
context.beginPath();
context.lineWidth = 10;
context.arc(350,205,70,0,3.14,true);
context.closePath();
//context.fillStyle = 'red';
var grd = context.createRadialGradient(330,220,2,200,2,300);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'yellow');
context.fillStyle = grd;
context.fill();
context.strokeStyle = "rgb(100,0,0)";
context.stroke();

context.beginPath();
context.lineWidth = 10;
context.arc(350,205,10,0,3.14,true);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "rgb(100,0,0)";
context.stroke();

context.beginPath();
context.lineWidth = 10;
context.arc(400,200,15,0,3.14,true);
context.closePath();
context.fillStyle = 'rgb(100,0,0)';
context.fill();
context.strokeStyle = "rgb(100,0,0)";
context.stroke();

context.beginPath();
context.arc(320,170,15,0,6.3,false);
context.fillStyle = "rgb(100,0,0)";
context.fill();
context.closePath();

context.beginPath();
context.arc(360,150,15,0,6.3,false);
context.fillStyle = "rgb(100,0,0)";
context.fill();
context.closePath();

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> end here

};

((/script))

((/head))

((body))

((canvas id="myCanvas" width="800" height="600"))((/canvas))

((/body))
((/html))