Skip to main content

HTML5 line border style (cap) example

Here is the code :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>just testing</title>
<script src="js/jqery2.js"></script>
<script type="text/javascript">
$(document).ready(function() {

});
</script>
</head>

<body>

 <canvas id="myCanvas" width="578" height="200"></canvas>
     <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // butt line cap (top line)
      context.beginPath();
      context.moveTo(200, canvas.height / 2 - 50);
      context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
      context.lineWidth = 20;
      context.strokeStyle = '#0000ff';
      context.lineCap = 'butt';
      context.stroke();

      // round line cap (middle line)
      context.beginPath();
      context.moveTo(200, canvas.height / 2);
      context.lineTo(canvas.width - 200, canvas.height / 2);
      context.lineWidth = 20;
      context.strokeStyle = '#0000ff';
      context.lineCap = 'round';
      context.stroke();

      // square line cap (bottom line)
      context.beginPath();
      context.moveTo(200, canvas.height / 2 + 50);
      context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
      context.lineWidth = 20;
      context.strokeStyle = '#0000ff';
      context.lineCap = 'square';
      context.stroke();
    </script>
   
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

show image in asp.net form from database

In order to show image from database to webform first add an image control in webpage.   <asp:Image ID="imgStudentImage" runat="server" Height="157px" Width="160px" /> Then add new webform to read image from database for example displayimage.aspx and in code behind model write the following code. public string str = //your string     public SqlConnection conn;     public SqlCommand sql = new SqlCommand();     public SqlDataReader dr;     public string strSQL;     protected void Page_Load(object sender, EventArgs e)     {         conn = new SqlConnection(str);         conn.Open();         long id = Convert.ToInt64(Request.QueryString["mId"]);         strSQL = "";         strSQL = strSQL + " SELECT snap from S...
Post a Comment
Read more

Export Doc,Access,Image,CSV,Excel,Pdf,XML,HTML,Text,Print of Gridview in Asp.net

First import itextsharp.dll in the solution and use three namespces (basically for pdf) using iTextSharp.text; using iTextSharp.text.pdf; using iTextSharp.text.html.simpleparser;          Then Use the following code :- on each button  click  protected void Page_Load(object sender, EventArgs e)         {             if (!Page.IsPostBack)             {                 BindGridDetails(GridView1);             }         }                 protected DataTable BindGridDetails(GridView GridView1)         {   ...
1 comment
Read more

Advent of code 2022 day 22 part 1

  function main(input, input1) {     let grid = input.split( '\n' );     grid.shift();     // only in big input     for ( let i = 0 ; i < 100 ; i++) {         grid[i] = '                                                  ' + grid[i];     }     //console.log(grid[100])     grid = grid.map(x => x.split( '' ))     // find first left top allowed     let temppos = - 1 ;     grid[ 0 ].forEach((element, i) => {         if (temppos == - 1 && element == '.' ) {             temppos = i;         }     });     let initpos = new pos(temppos, 0 )     // console.log(initpos)     // make grid equal shape     let...
Post a Comment
Read more