All I Do is Winn: HTML Image

Shapes and Shadows - I choose to create my own simple image. When learning more about HTML I enjoyed the different types of shadows you could add to the image. I feel it makes it much more interesting to look at and therefore choose it to be the main part of my project.

Jordan Winn: Shapes and Shadows
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

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

context.beginPath();
context.rect(300,70,300,200);
context.fillStyle='blue';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'blue';
context.stroke();

context.beginPath();
context.moveTo(150, 40);

context.rect(200, 50, 230, 120);
context.fillStyle= 'red';
context.shadowColor = '#999';
context.shadowBlur = 20;
context.shadowOffsetX = 30;
context.shadowOffsetY = 30;
context.fill();

context.beginPath();
context.arc(100,25,100,50, Math.PI, false);
context.closePath();
context.lineWidth = 7;
context.fillStyle= 'blue';
context.fill();
context.strokeStyle = '#55OOOO';
context.stroke();

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

};

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

All I Do is Winn

Sunday, October 23, 2016

HTML Image

No comments:

Post a Comment