The following screenshot is an activity made for Interactive Media Design.
 |
| A flower made in HTML |
If you would like to view the file for yourself, click here.
The code will also be pasted here for your convenience.
<html>
<head>
<title> Javascript Code : Draw on HTML Canvas using Javascript - Circle, Arc, Rectangle, Square , Lines , Shapes , BUtton Controlled Drawing </title>
</head>
<body>
<canvas height="500" id="myCanvas" style="border: 1px solid #d3d3d3;" width="1000">
Your browser does not support the HTML canvas tag.</canvas> <br />
<button id="sky" onclick="Sky()">Sky </button>
<button id="clouds" onclick="Clouds()"> Cloud </button>
<button id="flower" onclick="Flower()"> Flower </button>
<button id="clear" onclick="Erase()"> Clear </button>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function Flower()
{
ctx.fillStyle = "#ebf283";
ctx.fillRect(490,250,20,530);
ctx.fillStyle = "#fc9fe8";
ctx.beginPath();
ctx.arc(500, 150,50, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#fc9fe8";
ctx.beginPath();
ctx.arc(575, 200,50, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#fc9fe8";
ctx.beginPath();
ctx.arc(425, 200,50, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#fc9fe8";
ctx.beginPath();
ctx.arc(455, 280,50, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#fc9fe8";
ctx.beginPath();
ctx.arc(545, 280,50, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#ebf283";
ctx.beginPath();
ctx.arc(500, 225, 60, 0, 2 * Math.PI);
ctx.fill();
}
function Sky()
{
ctx.fillStyle = "#a1f9ff";
ctx.fillRect(0,0,1000,1000);
}
function Clouds()
{
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(200, 100, 60, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(245, 125, 60, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(340, 125, 70, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(180, 175, 70, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(400, 185, 60, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.fillRect(180,155,220,90);
}
function Erase()
{
ctx.clearRect(0,0,1000,500);
}
</script>
</body>
</html>
