Digital Arts Blog

I really enjoyed this project and this form of digital arts. I enjoyed working on this project because it was very technical and took time to do all the correct math to get a symmetrical image. I took me a lot of tries to get the shape of the hamsa hand, but I think that it turned out to be a great image for a first time HTML5 worker. After making the shape of the hand, I started working on the evil eye graphic. That too took time to make the smaller dots above the eye. I then decided to add in the word Namaste and a quote that I am in love with. I feel that with more time I could have figured out how to do all the detail in the hamsa hand above, but I tried, and it was very difficult and time consuming. As I continue on with this I will wok on the hand and upload a new graphic to my blog.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);

var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#FFE4C4');
grd.addColorStop(1, '#CD5C5C');
context.fillStyle = grd;
context.fill();

context.beginPath();
context.moveTo(400, 25);
context.bezierCurveTo(390, 60, 350, 60, 350, 100);
context.bezierCurveTo(310, 75, 275, 100, 275, 300);
context.bezierCurveTo(225, 290, 225, 340, 160, 350);
context.bezierCurveTo(250, 350, 200, 500, 400, 575);
context.bezierCurveTo(600, 550, 550, 350, 640, 350);
context.bezierCurveTo(575, 340, 575, 290, 525, 300);
context.bezierCurveTo(525, 100, 485, 75, 450, 100);
context.bezierCurveTo(450, 60, 410, 60, 400, 25);
context.lineWidth = 5;
context.fillStyle = '#FF99FF' ;
context.fill();
context.strokeStyle = 'black';
context.stroke();

var grd = context.createRadialGradient(238, 50, 100, 238, 150, 300);
grd.addColorStop(.3, '#FF99FF');
grd.addColorStop(.7, '#FF00FF');
grd.addColorStop(1, '#00FA9A');

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

context.beginPath();
context.arc(400, 425, 28, 0, 2 * Math.PI, false);
context.fillStyle = '#33FFFF' ;
context.fill();
context.beginPath();
context.arc(400, 425, 14, 0, 2 * Math.PI, false);
context.fillStyle = 'white' ;
context.fill();
context.beginPath();
context.arc(400, 425, 7, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.moveTo(330, 445);
context.quadraticCurveTo(400, 475, 475, 445);
context.lineWidth = 3;
context.strokeStyle = 'black' ;
context.stroke();
context.beginPath();
context.arc(345, 430, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(350, 414, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(360, 400, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(373, 388, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(387, 381, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(400, 378, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(413, 381, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(427, 388, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(440, 400, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(450, 414, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();
context.beginPath();
context.arc(455, 430, 4, 0, 2 * Math.PI, false);
context.fillStyle = 'black' ;
context.fill();

context.font = '60pt Calibri';
context.fillStyle = 'black';
context.fillText('NAMASTE', 239, 360);

context.font = '20pt Calibri';
context.fillStyle = 'black';
context.fillText('A thousand moments that I had taken for granted---mostly', 90, 600);
context.fillText('because I had assumed that there would be a thousand more.', 90, 620);

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="700"></canvas>
</body>
</html>