 |
| My favorite is the peenk one. |
HTML5 Canvas is a miserable, miserable beast... but I feel like I'm well on my way to conquering it. I spent like 4 hours coding these balloons and they're mostly simple circles!
The code used to create this image is after the jump!
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//SKY BACKGROUND
context.beginPath();
context.rect(0, 0, 600, 600);
var grd = context.createLinearGradient(600, 150, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, "rgb(186,234,245)");
// dark blue
grd.addColorStop(1, "rgb(21,110,189)");
context.fillStyle = grd;
context.fill();
//ORANGE BALLOON
var centerX = canvas.width / 3;
var centerY = canvas.height / 6;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(255,127,36,.8)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgba(186,73,17,.8)";
context.stroke();
//ORANGE BALLOON TAIL
context.beginPath();
context.moveTo(200, 200);
context.bezierCurveTo(200, 450, 250, 300, 450, 600);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//ORANGE BALLOON TWISTY TIE
context.beginPath();
context.moveTo(200, 200);
context.bezierCurveTo(200, 243, 150, 200, 200, 200);
context.bezierCurveTo(230, 260, 230, 200, 200, 200);
context.closePath();
context.lineWidth = 3;
context.fillStyle = "rgba(255,127,36,.8)";
context.fill();
context.lineJoin = 'round';
context.strokeStyle = "rgba(186,73,17,.8)";
context.stroke();
//ORANGE BALLOON BIG LOWER HIGHLIGHT
var x = canvas.width / 3;
var y = canvas.height / 6;
var radius = 90;
var startAngle = 1.75 * Math.PI;
var endAngle = 1.85 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//ORANGE BALLOON SMALL UPPER HIGHLIGHT
var x = canvas.width / 3;
var y = canvas.height / 6;
var radius = 90;
var startAngle = 1.57 * Math.PI;
var endAngle = 1.72 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//TEAL BALLOON
var centerX = canvas.width / 8;
var centerY = canvas.height / 7;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(22,222,195,.8)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgba(12,138,121,.8)";
context.stroke();
//TEAL BALLOON TAIL
context.beginPath();
context.moveTo(90, 183);
context.bezierCurveTo(20, 400, 350, 250, 440, 600);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//TEAL BALLOON TWISTY TIE
context.beginPath();
context.moveTo(90, 180);
context.bezierCurveTo(86, 249, 20, 183, 90, 193);
context.bezierCurveTo(120, 228, 130, 183, 90, 183);
context.closePath();
context.lineWidth = 3;
context.fillStyle = "rgba(22,222,195,.8)";
context.fill();
context.lineJoin = 'round';
context.strokeStyle = "rgba(12,138,121,.8)";
context.stroke();
//TEAL BALLOON BIG LOWER HIGHLIGHT
var x = canvas.width / 8;
var y = canvas.height / 7;
var radius = 90;
var startAngle = 1.79 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//TEAL BALLOON SMALL UPPER HIGHLIGHT
var x = canvas.width / 8;
var y = canvas.height / 7;
var radius = 90;
var startAngle = 1.65 * Math.PI;
var endAngle = 1.76 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//GREEN BALLOON
var centerX = canvas.width / 5.5;
var centerY = canvas.height / 2.4;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(105,224,31,.8)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgba(68,138,25,.8)";
context.stroke();
//GREEN BALLOON TAIL
context.beginPath();
context.moveTo(100, 350);
context.bezierCurveTo(20, 600, 500, 400, 445, 600);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//GREEN BALLOON TWISTY TIE
context.beginPath();
context.moveTo(100, 350);
context.bezierCurveTo(97, 395, 50, 350, 100, 350);
context.bezierCurveTo(105, 395, 140, 350, 100, 350);
context.closePath();
context.lineWidth = 3;
context.fillStyle = "rgba(105,224,31,.8)";
context.fill();
context.lineJoin = 'round';
context.strokeStyle = "rgba(68,138,25,.8)";
context.stroke();
//GREEN BALLOON BIG LOWER HIGHLIGHT
var x = canvas.width / 5.5;
var y = canvas.height / 2.4;
var radius = 90;
var startAngle = 1.77 * Math.PI;
var endAngle = 1.8 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//GREEN BALLOON SMALL UPPER HIGHLIGHT
var x = canvas.width / 5.5;
var y = canvas.height / 2.4;
var radius = 90;
var startAngle = 1.55 * Math.PI;
var endAngle = 1.74 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//PEENK BALLOON
var centerX = canvas.width / 2.05;
var centerY = canvas.height / 2.9;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(250,52,135,.8)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgba(156,25,79,.8)";
context.stroke();
//PEENK BALLOON TAIL
context.beginPath();
context.moveTo(290, 307);
context.bezierCurveTo(150, 450, 400, 400, 450, 600);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//PEENK BALLOON TWISTY TIE
context.beginPath();
context.moveTo(290, 307);
context.bezierCurveTo(280, 345, 240, 307, 290, 307);
context.bezierCurveTo(300, 352, 320, 307, 290, 307);
context.closePath();
context.lineWidth = 3;
context.fillStyle = "rgba(250,52,135,.8)";
context.fill();
context.lineJoin = 'round';
context.strokeStyle = "rgba(156,25,79,.8)";
context.stroke();
//PEENK BALLOON BIG LOWER HIGHLIGHT
var x = canvas.width / 2.05;
var y = canvas.height / 2.9;
var radius = 90;
var startAngle = 1.78 * Math.PI;
var endAngle = 1.97 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//PEENK BALLOON SMALL UPPER HIGHLIGHT
var x = canvas.width / 2.05;
var y = canvas.height / 2.9;
var radius = 90;
var startAngle = 1.63 * Math.PI;
var endAngle = 1.75 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//PURPLE BALLOON
var centerX = canvas.width / 4;
var centerY = canvas.height / 4;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(70,76,250,.8)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgba(20,23,110,.8)";
context.stroke();
//PURPLE BALLOON TAIL
context.beginPath();
context.moveTo(150, 250);
context.bezierCurveTo(50, 500, 300, 300, 450, 600);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//PURPLE BALLOON TWISTY TIE
context.beginPath();
context.moveTo(150, 250);
context.bezierCurveTo(140, 290, 100, 250, 150, 250);
context.bezierCurveTo(170, 295, 190, 250, 150, 250);
context.closePath();
context.lineWidth = 3;
context.fillStyle = "rgba(70,76,250,.8)";
context.fill();
context.lineJoin = 'round';
context.strokeStyle = "rgba(20,23,110,.8)";
context.stroke();
//PURPLE BALLOON BIG LOWER HIGHLIGHT
var x = canvas.width / 4;
var y = canvas.height / 4;
var radius = 90;
var startAngle = 1.8 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
//PURPLE BALLOON SMALL UPPER HIGHLIGHT
var x = canvas.width / 4;
var y = canvas.height / 4;
var radius = 90;
var startAngle = 1.69 * Math.PI;
var endAngle = 1.77 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 8;
context.strokeStyle = "rgba(250,250,250,.9)";
context.stroke();
</script>
</body>
No comments:
Post a Comment