HTML5 Canvas

By -
This is Sample Code for HTML Animation.

getContext():-this is used to draw 2d graphics

<!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
   
   graphic.font="40px courier";
 graphic.fillText("Pranay Canvas",50,50);
 graphic.strokeStyle="orange";
</script>
</body>

</html>
_________________________________________________________________________________
Output of Above code
_________________________________________________________________________________
Now if you want to color the Text then use method "  graphic.strokeText"

<!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
    graphic.font="40px courier";
   graphic.strokeStyle="orange";
   graphic.strokeText("Pranay canvas",50,50);
     console.log("message");

 </script>
</body>

</html>


___________________________________________________________________________
Drawing Rectangle in canvas

 To draw shape in canvas , use below function 

 fillRect(x,y,width,height) x-axis , y axis will form the shape
fillstyle will fill the box with mentioned color
Sample Code 

 <!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
   graphic.fillStyle="orange";
   graphic.fillRect(50,50,200,200);

</script>
</body>

</html>

_________________________________________________________________________________Output of above code
HTML Drawing using Canvas _________________________________________________________________________________

 strokeRect(x,y,width,height) x-axis , y axis will form the shape
strokeStyle will fill the border of the box with mentioned color

 <!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
   graphic.strokeStyle="orange";
   graphic.strokeRect(50,50,200,200);

</script>
</body>
</html>
______________________________________________________________________________





HTML5 ARC Tutorial

 __________________________________________________________________________


<!DOCTYPE html>
<html>
<title>Arc tutorial by Pranay Tiwari</title>
<head>
<style>
#canva{
       border:solid 2px red; 
     }
</style>
</head>
<body>
<canvas id="canva" width="300" height="300"></canvas>
<script>
 let drawele=document.getElementById("canva");
 let graphic=drawele.getContext("2d");
 graphic.strokeStyle="red";
 graphic.arc(150,150,150,0,2*Math.PI);
   graphic.stroke();
</script>
</body>
</html>

_____________________________________________________________________________


________________________________________________________________________

changine the value in above code with below one , arc will change
 graphic.arc(150,150,150,0,1.5*Math.PI);





The arc() method creates an arc/curve (used to create circles, or parts of circles).
Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.
Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.




Center
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Start angle
arc(100,75,50,0,1.5*Math.PI)
End angle
arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript syntax:context.arc(x,y,r,sAngle,eAngle,counterclockwise);





Sample code 

<!DOCTYPE html>
<html>
<title>Arc tutorial by Pranay Tiwari</title>
<head>
<style>
#canva{
       border:solid 2px red; 
     }
</style>
</head>
<body>
<canvas id="canva" width="300" height="300"></canvas>
<script>
 let drawele=document.getElementById("canva");
 let graphic=drawele.getContext("2d");
 graphic.strokeStyle="red";
  graphic.beginPath();
  graphic.arc(150,150,150,0,2*Math.PI);
  graphic.stroke();
  graphic.beginPath();
  graphic.strokeStyle="orange";
  graphic.arc(150,150,130,0,2*Math.PI);
  graphic.stroke();
  graphic.strokeStyle="blue";
  graphic.beginPath();
 graphic.arc(150,150,100,0,2*Math.PI);
   graphic.stroke();
    graphic.strokeStyle="pink";
     graphic.beginPath();
 graphic.arc(150,150,50,0,2*Math.PI);
   graphic.stroke();
</script>
</body>
</html>
Sample Code 2 
<!DOCTYPE html>
<html>
<title>Arc tutorial by Pranay Tiwari</title>
<head>
<style>
#canva{
       border:solid 2px red; 
     }
</style>
</head>
<body>
<canvas id="canva" width="300" height="300"></canvas>
<script>
 let drawele=document.getElementById("canva");
 let graphic=drawele.getContext("2d");
 graphic.fillStyle="red";
  graphic.beginPath();
  graphic.arc(150,150,150,0,2*Math.PI);
  graphic.fill();
  graphic.beginPath();
  graphic.fillStyle="orange";
  graphic.arc(150,150,130,0,2*Math.PI);
  graphic.fill();
  graphic.fillStyle="blue";
  graphic.beginPath();
 graphic.arc(150,150,100,0,2*Math.PI);
   graphic.fill();
    graphic.fillStyle="pink";
     graphic.beginPath();
 graphic.arc(150,150,50,0,2*Math.PI);
   graphic.fill();
</script>
</body>
</html>


 Another sample HTML Animation code

 <!DOCTYPE html>
<html>
<head>
<title>Animation by Pranay Tiwari</title>
<style>
      #canva{
                border:solid 2px red;
            }
     
</style>
<body>
</head>
<canvas id="canva"  width="300" height="300"></canvas>
<script>
let drawEle=document.getElementById("canva");
let graphic=drawEle.getContext("2d");
let x=50;
let y=50;
function animation()
{
 console.log(graphic);
 graphic.beginPath();
graphic.fillStyle="rgba(0,0,0,0.05)";
graphic.fillRect(0,0,drawEle.width,drawEle.height);
graphic.beginPath();
graphic.fillStyle="white";
graphic.arc(x,y,50,0,2*Math.PI);
 x++;
if (x>=250)
{
x=250;
y++;
}
  graphic.fill();
}
   setInterval("animation()",50);
</script>

 </body>
</html> 





Pranay is a versatile Oracle Technical consultant. Adept in Oracle ERP development, SDLC management, design, and architecture. He has 11 years of extensive experience in Oracle Apps implementation engaged in technical development areas of Oracle Applications 11i/R12 E-Business Suite. He possesses sound knowledge in technologies like OAF, ADF, J2EE, MSCA, Oracle PaaS Cloud, Java Cloud services, ADF & XML Publisher. Currently, he is working for BirlaSoft Inc. USA. Being a Consistent solution provider in Oracle Developer Community forums earned him the title of "Technology Master”, Currently he holds 3rd position globally for providing a solution in Oracle Developer Community for the OAF Workspace. He has also authored several articles on ADF Technology, Fusion Financials, OAF & PaaS Cloud. He successfully presented the case study in Oracle Collaborate event forum on "How optimizing the Oracle Mobile App Solution Helped in Boosting the Productivity of a Warehouse."

Comments

Post a Comment

Popular posts from this blog

Sample HZ API's script to Create Contacts and Contact Points in Oracle

By -
1. Below Code will create Contact Point in Oracle . DECLARE    P_CONTACT_POINT_REC   HZ_CONTACT_POINT_V2PUB.CONTACT_POINT_REC_TYPE;    P_PHONE_REC           HZ_CONTACT_POINT_V2PUB.PHONE_REC_TYPE;    P_EDI_REC_TYPE        HZ_CONTACT_POINT_V2PUB.EDI_REC_TYPE;    P_EMAIL_REC_TYPE      HZ_CONTACT_POINT_V2PUB.EMAIL_REC_TYPE;    P_TELEX_REC_TYPE      HZ_CONTACT_POINT_V2PUB.TELEX_REC_TYPE;    P_WEB_REC_TYPE        HZ_CONTACT_POINT_V2PUB.WEB_REC_TYPE;    X_RETURN_STATUS       VARCHAR2 (1000);    X_CONTACT_POINT_ID    NUMBER;    X_MSG_COUNT           NUMBER;    X_MSG_DATA            VARCHAR2 (1000); BEGIN    P_CONTACT_POINT_REC.CONTACT_POINT_TYPE := 'EMAIL';    P_CONTACT_POINT_REC.OWN...
Read more

REST integration built-in OIC to read Large files with size more than 10MB

By -
Image
Processing large files in any integration requires a lot of effort and complex coding. Every integration platform has a limit size to read a file, similarly, the OIC service provides a limit of 10MB to read the file, if the size exceeds, then the below error will be encountered  Error Reason: Translation Error. Translation Error. Error while translating message to native format. Please make sure that the payload for the outbound interaction conforms to the schema and payload size does not exceed threshold. Error occured as File size exceeds maximum threshold size of 10 MB : Application Error Error Summary: ICS runtime execution error  In this article, we will learn how to read the big-size file in OIC.  Note only XML and CSV formats are supported for larger file read operations.  Here we will build an integration with a source FTP connector to read files containing sizes more than 10 MB  &  read them through the "Read File in Chunks" features and c...
Read more