NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
7.Create a web page using HTML5 canvas elements to illustrate all canvas composition. Output must
exactly look like the following
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
text-align:center;
}
</style>
</head>
<body>
<center>
<script>
var gco = new Array();
gco.push("source-atop");
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("darker");
gco.push("copy");
gco.push("xor");
var n;
document.write("<table><tr>");
for (n = 0; n < gco.length; n++)
{
if(n%4==0)
{
document.write("</tr><tr>");
}
document.write("<td><div id='block" + n + "' >" );
var c = document.createElement("canvas");
c.width = 120;
c.height = 100;
document.getElementById("block" + n).appendChild(c);
var ctx = c.getContext("2d");
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 50, 50);
ctx.globalCompositeOperation = gco[n];
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(50, 50, 30, 0, 2 * Math.PI);
ctx.fill();
document.write("<br>"+gco[n] +"</div></td>");
}
document.write("</tr></table>");
</script>
</body>
</html>
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
Create a simple paint app which draws lines based on the selected color (chosen using color
input) with selected thickness (chosen using number input) and there must be a CLEAR button
to clear the canvas.
<!DOCTYPE html>
<html>
<head>
<title>Simple Paint App</title>
<style>
canvas {
border: 2px solid black;
}
div
{
width: 500px;
background-color: black;
color:white;
padding-left: 5px;
}
h1
{
color: rgb(3, 93, 93);
}
input {
margin:5px;
}
button
{
background-color:#388ae7;
color: white;
padding: 5px 15px;
font-size: 16px;
margin:5px;
}
</style>
</head>
<body>
<h1>Simple Paint App</h1>
<div>
<label for="colorInput">Choose color:</label>
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
<input type="color" id="colorInput" onchange="colorchange()"><br>
<label for="thicknessInput">Choose thickness:</label>
<input type="number" id="thicknessInput" onchange="thickness()"
min="1" max="50" value="1"><br>
<button id="clearButton" onclick="ClearCanvas()">Clear</button>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var colorInput = document.getElementById("colorInput");
var thicknessInput = document.getElementById("thicknessInput");
// Set the initial drawing style
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
// Function to draw a line from (x1, y1) to (x2, y2)
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function colorchange() {
ctx.strokeStyle = colorInput.value;
}
function thickness() {
ctx.lineWidth = thicknessInput.value;
}
function ClearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// Variables to store the starting and ending points of each line
var isDrawing = false;
var startX, startY, endX, endY;
// Event listeners for the canvas mouse events
canvas.addEventListener("mousedown", function(e) {
isDrawing = true;
startX = e.clientX - canvas.offsetLeft;
startY = e.clientY - canvas.offsetTop;
});
canvas.addEventListener("mousemove", function(e) {
if (isDrawing) {
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
endX = e.clientX - canvas.offsetLeft;
endY = e.clientY - canvas.offsetTop;
drawLine(startX, startY, endX, endY);
startX = endX;
startY = endY;
}
});
canvas.addEventListener("mouseup", function(e) {
isDrawing = false;
});
</script>
</body>
</html>
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
B5.Create a web page using HTML5/CSS3 to animate a truck movement. While the truck moves on
mountains and trees should move in the background.
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Moving Truck</title>
<style>
body {
background: #009688;
}
.loop-wrapper {
position: relative;
margin: auto auto;
height: 400px;
width: 600px;
overflow: hidden;
border-bottom: 3px solid #fff;
}
.mountain {
position: absolute;
height: 2px;
width: 2px;
right: -600px;
bottom: -10px;
box-shadow:
0 0 0 50px #4DB6AC,
60px 50px 0 70px #4DB6AC,
90px 90px 0 50px #4DB6AC,
250px 250px 0 50px #4DB6AC,
290px 320px 0 50px #4DB6AC,
320px 400px 0 50px #4DB6AC ;
transform: rotate(130deg);
animation: mtn 20s linear infinite;
}
.hill {
position: absolute;
height: 20px;
width: 200px;
right: -600px;
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
bottom: -50px;
border-radius: 50%;
box-shadow:
0 0 0 50px #4DB6AC,
-20px 0 0 20px #4DB6AC,
-90px 0 0 50px #4DB6AC,
250px 0 0 50px #4DB6AC,
290px 0 0 50px #4DB6AC,
620px 0 0 50px #4DB6AC ;
animation: hill 4s 2s linear infinite;
}
.tree {
position: absolute;
height: 100px;
width: 35px;
bottom: 0;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/tree.svg) no-repeat;
animation: tree 3s linear infinite;
}
.truck, .wheels {
position: absolute;
margin-right: -60px;
width: 85px;
right: 50%;
bottom: 0px;
}
.truck {
height: 60px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/truck.svg);
}
.wheels {
height: 15px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/wheels.svg);
}
.truck:before {
position: absolute;
width: 25px;
content: " ";
box-shadow:
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
-30px 28px 0 1.3px #fff,
-30px 18px 0 1.3px #fff;
animation: wind 1.5s infinite;
}
@keyframes tree {
0% { transform: translate(1350px); }
50% { }
100% { transform: translate(-50px); }
}
@keyframes wind {
0% { }
50% { transform: translateY(6px) }
100% { }
}
@keyframes mtn {
100% {
transform: translateX(-2000px) rotate(130deg);
}
}
@keyframes hill {
100% {
transform: translateX(-2000px);
}
}
</style>
</head>
<body>
<div class="loop-wrapper">
<div class="mountain"></div>
<div class="hill"></div>
<div class="tree"></div>
<div class="truck"></div>
<div class="wheels"></div>
</div>
</body>
</html>
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
A6. Create the following drawing in the html page using only SVG.
<!DOCTYPE html>
<html><body>
<svg width="25cm" height="25cm" viewBox="0 0 7 7">
<defs>
<!-- A rotating wheel for the cart -->
<g id="wheel">
<circle cx="0" cy="0" r="1" stroke="black" stroke-width="0.2"
fill="lightGray" />
<rect x="-0.9" y="-0.05" width="1.8" height="0.1" fill="black" />
<rect x="-0.9" y="-0.05" width="1.8" height="0.1" fill="black"
transform="rotate(120)"/>
<rect x="-0.9" y="-0.05" width="1.8" height="0.1" fill="black"
transform="rotate(240)"/>
</g>
<!-- A cart made from two wheels and two rects -->
<g id="cart" transform="translate(2.5,0) scale(0.3,0.3)">
<use xlink:href="#wheel" transform="translate(-1.8,-0.1)
scale(0.9,0.9)"/>
<use xlink:href="#wheel" transform="translate( 1.8,-0.1)
scale(0.9,0.9)"/>
<rect x="-3" y="0" width="6" height="2" fill="#CC0000"/>
<rect x="-2.3" y="1.9" width="2.6" height="1" fill="#CC0000"/>
</g>
<!-- a Sun with Lines -->
<g id="sun" fill="yellow" stroke="#DD8800" stroke-width="0.03">
<line x1="-0.75" y1="0" x2="0.75" y2="0"/>
<line x1="-0.75" y1="0" x2="0.75" y2="0" transform="rotate(30)"/>
<line x1="-0.75" y1="0" x2="0.75" y2="0" transform="rotate(60)"/>
<line x1="-0.75" y1="0" x2="0.75" y2="0" transform="rotate(90)"/>
<line x1="-0.75" y1="0" x2="0.75" y2="0" transform="rotate(120)"/>
<line x1="-0.75" y1="0" x2="0.75" y2="0" transform="rotate(150)"/>
<circle cx="0" cy="0" r="0.5"/>
</g>
<!-- single vanes -->
NAME:ABHIRAM CLASS:BCA-B ROLL:CA21371 DATE:10/06/2023
<polygon id="vane" points="0,0 0.5,0.1 1.5,0 0.5,-0.1"
fill="grey" stroke="pink" stroke-width="0.015"/>
<!-- A windmill with set of three vanes. -->
<g id="windmill">
<rect x="-0.05" y="0" width="0.1" height="3" fill="#AA9999"/>
<g transform="translate(0,3)"> <!-- The set of three vanes -->
<use xlink:href="#vane"/>
<use xlink:href="#vane" transform="rotate(120)"/>
<use xlink:href="#vane" transform="rotate(240)"/>
</g>
</g>
</defs>
<g transform="translate(0,4) scale(1,-1)">
<!-- sky as background-->
<rect x="0" y="0" width="7" height="7" fill="skyblue"/>
<!-- mountains -->
<polygon points="0,-1 0,0.8 1.5,1.65 1.8,1.3 3,2.1 4.7,0.7
6.1,1.2 7,0.8 7,-1" fill="green"/>
<!-- road -->
<rect x="0" y="-0.4" width="7" height="0.8" fill="black"/>
<!-- stripe in road -->
<rect x="0" y="-0.02" width="7" height="0.04" fill="white"/>
<!-- Add All above definitions here -->
<use xlink:href="#sun" transform="translate(5.8,3.2)"/>
<use xlink:href="#windmill" transform="translate(0.75,1)
scale(0.6,0.6)"/>
<use xlink:href="#windmill" transform="translate(2.2,1.3)
scale(0.4,0.4)"/>
<use xlink:href="#windmill" transform="translate(3.7,0.8)
scale(0.7,0.7)"/>
<use xlink:href="#cart"/>
</g>
</svg>
</body>
</html>
