To implement the various components of HTML5 Canvas

  •  Canvas Line
 Source Code:
<!DOCTYPE html>
<html>
<head>
    <title>Canvas Line</title>
</head>
<body>
<canvas id="Line" width="200" height="100" style="border:1px">
</canvas>
<script type="text/javascript">
    var c= document.getElementById('Line');
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>
</body>
</html>

Output:




  • Canvas Circle
Source Code:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Circle</title>
</head>
<body>
<canvas id="Circle" width="200" height="100" style="border:1px">
</canvas>
<script type="text/javascript">
    var c= document.getElementById('Circle');
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>
</body>
</html>
 
Output:

  • Canvas Rectangle
Source Code: 
<!DOCTYPE html>
<html>
<head>
    <title>Canvas Rectangle</title>
</head>
<body>
<canvas id="Rectangle" width="250" height="250">
</canvas>
<script type="text/javascript">
    var c= document.getElementById('Rectangle');
    var ctx=c.getContext("2d");
    ctx.fillStyle="#00aced";
    ctx.fillRect(10,10,210,200);
    ctx.clearRect(20,20,190,180);
    ctx.strokeStyle="black";
    ctx.strokeRect(40,40,150,140);
</script>
</body>
</html>
 

Output:



  • Canvas Text
Source Code :
<!DOCTYPE html>
<html>
<head>
    <title>Canvas Text</title>
</head>
<body>
<canvas id="Text" width="500" height="250">
</canvas>
<script type="text/javascript">
    var c= document.getElementById('Text');
    var ctx=c.getContext("2d");
    ctx.font="60px sans-serif";
    ctx.fillStyle="#00acde";
    ctx.fillText("Hello iView-ers",10,50);
    ctx.strokeStyle="black";
    ctx.strokeText("Hello iView-ers",10,50);
</script>
</body>
</html>
 
Output:


  • Canvas Linear Gradient
Source Code:
<!DOCTYPE html>
<html>
<head>
    <title>Canvas Linear Gradient</title>
</head>
<body>
<canvas id="Gradient" width="500" height="250">
</canvas>
<script type="text/javascript">
    var c= document.getElementById('Gradient');
    var ctx=c.getContext("2d");
//Gradient
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"white");
    grd.addColorStop(1,"#00acde");
//Fill with Gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
 
Output:

  • Canvas Radial Gradient 

    Source Code:

     <!DOCTYPE html>
    <html>
    <head>
        <title>Canvas Radial Gradient</title>
    </head>
    <body>
    <canvas id="Gradient" width="500" height="250">
    </canvas>
    <script type="text/javascript">
        var c= document.getElementById('Gradient');
        var ctx=c.getContext("2d");
    //Gradient
        var grd=ctx.createRadialGradient(75,50,5,90,60,100);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white");
    // Fill with gradient
        ctx.fillStyle=grd;
        ctx.fillRect(10,10,150,100);
    </script>
    </body>
    </html>

    Output:

      HTML 5 Canvas Combined

    Source Code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Canvas HUT</title>
    </head>
    <body>
    <canvas id="HUT" width="500" height="500">
    </canvas>
    <script type="text/javascript">
        var c= document.getElementById('HUT');
        var ctx=c.getContext("2d");
    //rect 1    
        ctx.fillStyle="#00acde";
        ctx.beginPath();
        ctx.rect(100,300,100,100);
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
    //rect 2    
        ctx.fillStyle="blue";
        ctx.beginPath();
        ctx.rect(200,300,200,100);
        ctx.fill();
        ctx.closePath();
        ctx.stroke();   
    //triangle
        ctx.fillStyle="#F9A520";
        ctx.beginPath();
        ctx.moveTo(100,300);
        ctx.lineTo(150,200);
        ctx.lineTo(200,300);
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
    //Roof
        ctx.fillStyle="brown";
        ctx.beginPath();
        ctx.moveTo(400,300);
        ctx.lineTo(350,200);
        ctx.lineTo(150,200);
        ctx.lineTo(200,300);
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
     //GradientDoor
        var grd=ctx.createLinearGradient(130,350,180,400);
        grd.addColorStop(0,"white");
        grd.addColorStop(1,"red");  
     //door
        ctx.beginPath();
        ctx.fillStyle=grd;
        ctx.lineWidth="2";
        ctx.strokeStyle="black";
        ctx.rect(130,350,40,49);
        ctx.fill();
        ctx.stroke();
    //GradientWindow
        var grd2=ctx.createLinearGradient(240,330,310,370);
        grd2.addColorStop(0,"white");
        grd2.addColorStop(1,"green");
    //window
        ctx.beginPath();
         ctx.fillStyle=grd2;
        ctx.lineWidth="2";
        ctx.strokeStyle="black";
        ctx.rect(240,330,120,50);
        ctx.fill();
        ctx.stroke();
    </script>
    </body>
    </html>

    Output:

     

LaTeX File

Include the following source Code in Document Environment in your LaTeX File

LaTeX Source:

 

\begin{document}
\newpage
\section{\emph{To implement the various components of HTML5 Canvas}}
\subsection{\emph{Code for Line:}} %use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Line</title>
</head>
<body>
<canvas id="Line" width="200" height="100" style="border:1px">
</canvas>
<script type="text/javascript">
var c= document.getElementById('Line');
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p1}%Change Output image with your output
\caption{Output For Line}
\end{figure}
%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Code for Circle:}} %use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Circle</title>
</head>
<body>
<canvas id="Circle" width="200" height="100" style="border:1px">
</canvas>
<script type="text/javascript">
var c= document.getElementById('Circle');
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p2}%Change Output image with your output
\caption{Output For Circle}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Code for Rectangle:}} %use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Rectangle</title>
</head>
<body>
<canvas id="Rectangle" width="250" height="250">
</canvas>
<script type="text/javascript">
var c= document.getElementById('Rectangle');
var ctx=c.getContext("2d");
ctx.fillStyle="#00aced";
ctx.fillRect(10,10,210,200);
ctx.clearRect(20,20,190,180);
ctx.strokeStyle="black";
ctx.strokeRect(40,40,150,140);
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p3}%Change Output image with your output
\caption{Output For Rectangle}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Code for Text:}} %use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text</title>
</head>
<body>
<canvas id="Text" width="500" height="250">
</canvas>
<script type="text/javascript">
var c= document.getElementById('Text');
var ctx=c.getContext("2d");
ctx.font="60px sans-serif";
ctx.fillStyle="#00acde";
ctx.fillText("Hello iView-ers",10,50);
ctx.strokeStyle="black";
ctx.strokeText("Hello iView-ers",10,50);
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p4}%Change Output image with your output
\caption{Output For Text}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Code for Linear Gradient:}} %use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Linear Gradient</title>
</head>
<body>
<canvas id="Gradient" width="500" height="250">
</canvas>
<script type="text/javascript">
var c= document.getElementById('Gradient');
var ctx=c.getContext("2d");
//Gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"white");
grd.addColorStop(1,"#00acde");
//Fill with Gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p5}%Change Output image with your output
\caption{Output For Linear Gradient}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Code for Radial Gradient:}} %use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Canvas Radial Gradient</title>
</head>
<body>
<canvas id="Gradient" width="500" height="250">
</canvas>
<script type="text/javascript">
var c= document.getElementById('Gradient');
var ctx=c.getContext("2d");
//Gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p6}%Change Output image with your output
\caption{Output For Radial Gradient}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Code for HTML 5 Canvas:}} %use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Canvas HUT</title>
</head>
<body>
<canvas id="HUT" width="500" height="500">
</canvas>
<script type="text/javascript">
var c= document.getElementById('HUT');
var ctx=c.getContext("2d");
//rect 1
ctx.fillStyle="#00acde";
ctx.beginPath();
ctx.rect(100,300,100,100);
ctx.fill();
ctx.closePath();
ctx.stroke();
//rect 2
ctx.fillStyle="blue";
ctx.beginPath();
ctx.rect(200,300,200,100);
ctx.fill();
ctx.closePath();
ctx.stroke();
//triangle
ctx.fillStyle="#F9A520";
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(150,200);
ctx.lineTo(200,300);
ctx.fill();
ctx.closePath();
ctx.stroke();
//Roof
ctx.fillStyle="brown";
ctx.beginPath();
ctx.moveTo(400,300);
ctx.lineTo(350,200);
ctx.lineTo(150,200);
ctx.lineTo(200,300);
ctx.fill();
ctx.closePath();
ctx.stroke();
//GradientDoor
var grd=ctx.createLinearGradient(130,350,180,400);
grd.addColorStop(0,"white");
grd.addColorStop(1,"red");
//door
ctx.beginPath();
ctx.fillStyle=grd;
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.rect(130,350,40,49);
ctx.fill();
ctx.stroke();
//GradientWindow
var grd2=ctx.createLinearGradient(240,330,310,370);
grd2.addColorStop(0,"white");
grd2.addColorStop(1,"green");
//window
ctx.beginPath();
ctx.fillStyle=grd2;
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.rect(240,330,120,50);
ctx.fill();
ctx.stroke();
</script>
</body>
</html>

\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.9]{p7}%Change Output image with your output
\caption{Output For HUT Canvas}
\end{figure}
\end{document}

 

 OUTPUT:

 

 

Comments

Post a Comment

Popular posts from this blog

To create an html page with frames and frameset

Image
Layout Of HTML Frame HTML Source Code: <!DOCTYPE html> <html> <frameset rows="50%,*" > <frameset cols="50%,*"> <frame src="E:\documents\IM LAB\html\HTML1.html">   HTML Page 1 <frame src="E:\documents\IM LAB\html\HTML2.html">   HTML Page 2 </frameset> <frameset cols="25%,37.5%,37.5%">   <frame src="E:/documents/IM%20LAB/html/sanjam.jpg">   YOUR PICTURE   <frame src="E:\documents\IM LAB\html\HTML3.html">    HTML Page 3 <frame src="E:\documents\IM LAB\html\LinkToHtml.html">   HTML Page 4     </frameset> </html> Output: Include the following source Code in Document Environment in your LaTeX File LaTeX Source: \documentclass[12pt]{article} \usepackage{graphicx} \usepackage{wrapfig} \usepackage{multicol} \usepackage{caption} \usepackage{subcaption}...
Read More »

1. Write a program to insert a new element at end as well as at a given position in an array in Java

Image
import java.util.Scanner; class DSPM1 { public static void main(String args[]) { Scanner mi = new Scanner(System.in); int arr[]=new int[10]; int i; System.out.println("Enter the no. of elements to be enter:"); int n =mi.nextInt(); System.out.println("Enter the elements:"); for(i=0;i<n;i++) { arr[i]=mi.nextInt(); } System.out.println("Enter The element to be inserted"); int insert=mi.nextInt(); System.out.println("At which position(Enter the index number)"); int pos=mi.nextInt(); for(i=n;i>pos;i--) { arr[i]=arr[i-1]; } arr[pos]=insert; System.out.println("Inserted Successfully!!\nNow the new array"); for(i=0;i<n+1;i++) { System.out.println(arr[i]); } System.out.println("/*\nName-Sanjampreet Singh\nRoll Number-1507967\n*/"); } } OUTPUT:
Read More »

1. To familiarize with network devices like switch, hub, routers and bridges in LaTex

\documentclass[12pt]{article} \usepackage{graphicx} \usepackage{wrapfig} \usepackage{multicol} \usepackage{caption} \usepackage{subcaption} \usepackage{transparent} \usepackage{multirow} \usepackage{eso-pic} \usepackage[utf8]{inputenc} \usepackage{color} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \newcommand\BackgroundIm{ \put(0,0){ \parbox[b][\paperheight]{\paperwidth}{ \vfill \centering {\transparent{0.05} \includegraphics[height=\paperheight,width=\paperwidth, keepaspectratio]{gne} \vfill }}}} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \begin{document} \begin{titlepage} \newcommand{\HRule}{\rule{\linewidth}{1mm}} \begin{minipage}[height=\paperheight]{0.8\textwidth} \centering { \textcolor{blue} { \textsc{\Large Guru Nanak Dev Engg College }\\[0.5cm] \textsc{\large Practical File}\\[0.3cm] \HRule \\[0.2cm] { \huge \bfseries Internet Methodologies}\\[0.1cm] \HRule \\[2cm]} \includegraphics[width=60mm,scale=0.7]{gne}\\[2cm] \textcolor{blue} ...
Read More »